VUEJSのtransition,transition-groupについてメモ

概要

アニメーションを作るために便利なtransitionとtransition-groupについてメモ。

公式からの画像。

vue3では v-enter・v-leaveがv-enter-from・v-leave-fromになっている。

v-enterでの状態についてだと、各名前は以下の状態に対応する。

• v-enter : 要素がレンダリングされる前
• v-enter-active : 要素がレンダリングされている途中
• v-enter-to : 要素がレンダリングされる後

v-enter-toとかv-leaveは要素がレンダリングされてる状態のままでいいことが多いから、
指定されないことが多い。

/* vue-jsの公式ドキュメントのcss事例 */
/* `v-enter-to`とか`v-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;
}

気をつけるべきこと

tranisionとtransition-gruopの違い

transitionはv-ifとかv-showに対して作用するもの。
transition-groupは連想配列の加減に対して作用するもの。
transition-groupでv-ifとかを囲んでも全く意味ないので注意。

v-bindのkey

v-bind:keyの指定をindexにするとダメらしい。

transition-groupの上にv-if``v-showをつける

下記のコードのように、あるテンプレート内でtransition-groupの上位にv-showをつけると、transition-groupがうまく効かない可能性あり。別テンプレートに記載したらいけた。

<template>
  <div v-if:"isShow"> <!-- ここでv-ifとかつけるとtransition-groupが効かなくなる -->
    <transition-group name="todo">
      <div v-for="(todo, index) in todos" v-bind:key="(todo.id)">
        <Todo :todo="todo">
    </transition-group>
  </div>
</template>

参考記事