はじめに

Vue.jsのトランジションクラスが発動するタイミングをまとめました。

この記事が役に立つ方

- OS: macOS Catalina 10.15.1
- Vue: 2.6.10

Vue.jsの機能で、CSSトランジション/アニメーションをより使いやすくサポートしてくれます。

index.html

...略
<div id="app">
  <transition>
    トランジションさせたい要素
  </transition>
</div>
...略

main.js

new Vue ({
  el: '#app'
})

シンプルに<transition>で囲むだけなので簡単です。

※画像の例はopacityをいじった場合です。

※画像は公式ドキュメントから拝借しました。

See the Pen rNaMNgo by terufumi (@terufumi1122) on CodePen.

最後まで読んで頂きありがとうございました