トランジション

トランジション効果をかけたい要素を transition ラッパーコンポーネントで囲む

<transition name="fade">
  <p v-if="show">hello</p>
</transition>

トランジションのスタイルを指定する

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

参考:

Enter/Leave とトランジション一覧 — Vue.js [公式]

CSS transitionで頑張らないVue.js transition – Qiita

Vue.jsのTransitionでいい感じのアプリにする – Qiita

Vue.js でたのしいトランジション 通常編 | Cubix

Vue.js でたのしいトランジション リスト編 | Cubix

トランジションクラス

  • v-enter
  • v-enter-active
  • v-enter-to
  • v-leave
  • v-leave-active
  • v-leave-to

参考:

トランジションクラス – Enter/Leave とトランジション一覧 — Vue.js [公式]

appear

参考:

初期描画時のトランジション – Enter/Leave とトランジション一覧 — Vue.js [公式]

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です