tag:crieit.net,2005:https://crieit.net/tags/animation/feed Crieitでタグ「animation」に投稿された最近の記事 2020-02-19T19:58:48+09:00 https://crieit.net/tags/animation/feed tag:crieit.net,2005:PublicArticle/15726 2020-02-19T19:58:48+09:00 2020-02-19T19:58:48+09:00 https://crieit.net/posts/Vue-Nuxt <p>VueとNuxtでアニメーションをするときに調べたところのまとめ。<br /> 公式サイトを読みながら、関連するとこをまとめた感じの備忘録。</p> <h4 id="トランジションクラスってのがあるらしい"><a href="#%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%A3%E3%81%A6%E3%81%AE%E3%81%8C%E3%81%82%E3%82%8B%E3%82%89%E3%81%97%E3%81%84">トランジションクラスってのがあるらしい</a></h4> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://jp.vuejs.org/v2/guide/transitions.html">Enter/Leave とトランジション一覧 — Vue.js</a></p> <p><code><transition></code>で囲むと、いくつかのクラスを生成してくれるらしい。<br /> そのクラスに対して、</p> <ol> <li>CSSトランジションやアニメーションをつけたり、</li> <li>Animate.css のようなサードパーティの CSS アニメーションライブラリと連携</li> </ol> <p>することで、アニメーションをつけていくぽい。</p> <pre><code class="html"><transition> <p v-if="show">hello</p> </transition> </code></pre> <ul> <li><code>v-enter-active</code> ... 表示/挿入のトランジション <ul> <li><code>v-enter</code> ... 表示/挿入のトランジションの開始</li> <li><code>v-enter-to</code> ... 表示/挿入のトランジションの終了</li> </ul></li> <li><code>v-leave-active</code> ... 非表示/削除のトランジション <ul> <li><code>v-leave</code> ... 非表示/削除のトランジションの開始</li> <li><code>v-leave-to</code> ... 非表示/削除のトランジションの終了</li> </ul></li> </ul> <p>refs: <a target="_blank" rel="nofollow noopener" href="https://jp.vuejs.org/v2/guide/transitions.html#%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%AF%E3%83%A9%E3%82%B9">トランジションクラス ｜ Enter/Leave とトランジション一覧 — Vue.js</a></p> <p><img src="https://jp.vuejs.org/images/transition.png" alt="トランジションクラス" title="トランジションクラス" /></p> <p><code><transition name="fade"></code>にすると、<code>v-</code>の部分が<code>fade-</code>のように指定したクラス名にできる。</p> <h4 id="CSSトランジション/CSSアニメーション"><a href="#CSS%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3%2FCSS%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">CSSトランジション/CSSアニメーション</a></h4> <h5 id="フェード"><a href="#%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89">フェード</a></h5> <pre><code class="css">.fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </code></pre> <h5 id="フェードしながらスライド"><a href="#%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%81%97%E3%81%AA%E3%81%8C%E3%82%89%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89">フェードしながらスライド</a></h5> <pre><code class="css">/* enter、 leave アニメーションで異なる間隔やタイミング関数を利用することができます */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active below version 2.1.8 */ { transform: translateX(10px); opacity: 0; } </code></pre> <h5 id="バウンスしてイン"><a href="#%E3%83%90%E3%82%A6%E3%83%B3%E3%82%B9%E3%81%97%E3%81%A6%E3%82%A4%E3%83%B3">バウンスしてイン</a></h5> <pre><code class="css">.bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } </code></pre> <h4 id="カスタムトランジションクラスでAnimate.cssと連携する"><a href="#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%A7Animate.css%E3%81%A8%E9%80%A3%E6%90%BA%E3%81%99%E3%82%8B">カスタムトランジションクラスでAnimate.cssと連携する</a></h4> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://jp.vuejs.org/v2/guide/transitions.html#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%AF%E3%83%A9%E3%82%B9">カスタムトランジションクラス | Enter/Leave とトランジション一覧 — Vue.js</a></p> <p><code>enter-active-class</code>や<code>leave-active-class</code>などを利用すると、<br /> 該当するクラスを指定したものに置き換えることができるらしい。</p> <p>Animate.cssのクラスを指定すれば、該当のアニメーションを設定できる。</p> <pre><code><link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css"> <div id="example-3"> <button @click="show = !show"> Toggle render </button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello</p> </transition> </div> </code></pre> <h4 id="コンポーネント間のトランジション"><a href="#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E9%96%93%E3%81%AE%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3">コンポーネント間のトランジション</a></h4> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://jp.vuejs.org/v2/guide/transitions.html#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E9%96%93%E3%81%AE%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3">コンポーネント間のトランジション — Vue.js</a></p> <h4 id="リストのトランジション"><a href="#%E3%83%AA%E3%82%B9%E3%83%88%E3%81%AE%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3">リストのトランジション</a></h4> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://jp.vuejs.org/v2/guide/transitions.html#%E3%83%AA%E3%82%B9%E3%83%88%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3">リストトランジション — Vue.js</a></p> <h4 id="状態のトランジション"><a href="#%E7%8A%B6%E6%85%8B%E3%81%AE%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3">状態のトランジション</a></h4> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://jp.vuejs.org/v2/guide/transitioning-state.html">状態のトランジション — Vue.js</a></p> <p>以上!!</p> <h2 id="こんなのつくってます!!"><a href="#%E3%81%93%E3%82%93%E3%81%AA%E3%81%AE%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%21%21">こんなのつくってます!!</a></h2> <p>積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！<br /> <a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">積読ハウマッチ</a>は、Nuxt.js+Firebaseで開発してます!</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="200"/></p> <p>もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ</p> <p>要望・感想・アドバイスなどあれば、<br /> 公式アカウント(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/MemoryLoverz">@MemoryLoverz</a>)や開発者(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka">@kira_puka</a>)まで♪</p> <h1 id="参考にしたサイト様"><a href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88%E6%A7%98">参考にしたサイト様</a></h1> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://jp.vuejs.org/v2/guide/transitions.html">Enter/Leave とトランジション一覧 — Vue.js</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://ja.nuxtjs.org/api/configuration-transition/#transition-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3">API: transition プロパティ - Nuxt.js</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/Nexus0831/items/9dbbac367a653fbd8ba4">VueでイケてるTransition! fade, slide編 - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/masaakikunsan/items/8ff141ebdcdd52c762fb#transition-group">CSS transitionで頑張らないVue.js transition - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.ritolab.com/entry/177#aj_3">Vue.jsのtransitionアニメーションとSassの導入</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://medium.com/nyle-engineering-blog/vue-js%E3%81%AE%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A8css%E3%81%A7%E4%BD%9C%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%82%92%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%8F%E8%A7%A3%E8%AA%AC-d594a263497d">Vue.jsのトランジションとCSSで作るアニメーションの基本をサンプルでわかりやすく解説</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/Nexus0831/items/9dbbac367a653fbd8ba4#fade">VueでイケてるTransition! fade, slide編 - Qiita</a></li> </ul> きらぷか@積読ハウマッチ/SSSAPIなど