Vue.js transition ラッパーコンポーネントのサンプルコード

Vue.js transition ラッパーコンポーネントのサンプルコード

transitionを利用してアニメーションを実現するサンプルコード

環境

  • OS  Windos10
  • エディタ VScode

Transitionクラスについて

v-enter v-enter-active v-enter-to が表示に関連するクラス
v- leave v- leave active v- leave -to が非表示に関連するクラス
これらのクラスに記述してゆき、アニメーションを実装する。

公式より引用

サンプルコード

下記のソースコードをindex.htmlとして作成する

vue.jsは開発バージョンを利用してます
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

保存したファイルをブラウザで開いて確認。
「 toggle 」ボタンをクリックするとテキストがフェードイン&フェードアウトされます