Vue/Nuxtのアニメーションするときに参考にしたところ
VueとNuxtでアニメーションをするときに調べたところのまとめ。
公式サイトを読みながら、関連するとこをまとめた感じの備忘録。
トランジションクラスってのがあるらしい
参考: Enter/Leave とトランジション一覧 — Vue.js
<transition>で囲むと、いくつかのクラスを生成してくれるらしい。
そのクラスに対して、
- CSSトランジションやアニメーションをつけたり、
- Animate.css のようなサードパーティの CSS アニメーションライブラリと連携
することで、アニメーションをつけていくぽい。
<transition>
<p v-if="show">hello</p>
</transition>
v-enter-active... 表示/挿入のトランジションv-enter... 表示/挿入のトランジションの開始v-enter-to... 表示/挿入のトランジションの終了
v-leave-active... 非表示/削除のトランジションv-leave... 非表示/削除のトランジションの開始v-leave-to... 非表示/削除のトランジションの終了
refs: トランジションクラス ｜ Enter/Leave とトランジション一覧 — Vue.js
<transition name="fade">にすると、v-の部分がfade-のように指定したクラス名にできる。
CSSトランジション/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;
}
フェードしながらスライド
/* 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;
}
バウンスしてイン
.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);
}
}
カスタムトランジションクラスでAnimate.cssと連携する
参考: カスタムトランジションクラス | Enter/Leave とトランジション一覧 — Vue.js
enter-active-classやleave-active-classなどを利用すると、
該当するクラスを指定したものに置き換えることができるらしい。
Animate.cssのクラスを指定すれば、該当のアニメーションを設定できる。
<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>
コンポーネント間のトランジション
リストのトランジション
状態のトランジション
以上!!
こんなのつくってます!!
積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ
要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪
参考にしたサイト様
フリーエンジニア/今はNuxt.js/いつかFlutter 受託＆アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい #DMでお仕事募集はお休み中 Kotlin/Python/Swift/Unity/Java/Haskell/DDD
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない！」という方は是非記事投稿リクエストボードへ！
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは？
コメント