エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
Vue.jsのトランジションアニメーション[基礎編]
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
Vue.jsのトランジションアニメーション[基礎編]
Enter/Leave とトランジション一覧 — Vue.js ざっくり分けると、表示時はenterで、非表示時はleave系の... Enter/Leave とトランジション一覧 — Vue.js ざっくり分けると、表示時はenterで、非表示時はleave系のクラスが付与されます。 これを理解したうえでフェードイン・フェードアウトのスタイルを作成してみましょう。 /* アニメーション中のスタイル */ .v-leave-active, .v-enter-active { transition: opacity 1s; } /* 表示アニメーション */ .v-enter { opacity: 0; } .v-enter-to { opacity: 1; } /* 非表示アニメーション */ .v-leave { opacity: 1; } .v-leave-to { opacity: 0; } opacity: 1はデフォルトの値なので省略して、下記サンプルのようにもできます。 トランジションのクラス名を変更する tr