More than 3 years have passed since last update.

【Vue.js】トランジション

Vue.js

Posted at 2021-02-08

Vue.jsが提供するトランジションパターン

表示・非表示系

<transition>
  <div v-if="show">消えたり現れたりする</div>
</transition>

入れ替わり系

<transition>
  <div v-if="show">こっちか</div>
  <div v-else>こっちになる</div>
</transition>

リスト表示系

<transition-group>
  <li v-for="item in items">{{ item }}</li>
</transition-group>

下記のような、ボタンクリックで表示と非表示を切り替えるプログラムがあるとする。

<template>
  <div>
    <button @click="show = !show">change</button>
      <p v-if="show">hello</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>

トランジションを用いて、下記のように5秒かけて表示、非表示が切り替わるようにする。

トランジションクラス分類

<transition name="fade">の時

トランジションクラス	状態
fade-enter	・現れる時の最初の状態・要素がtrueになる直前に、このクラスが適用され、trueになった直後に削除される。
fade-enter-active	・現れる時のトランジションの状態・要素が挿入される前に追加され、トランジション/アニメーションが終了すると削除さる。・トランジションの継続時間や、変化させたいcssプロパティーを指定する。
fade-enter-to	・現れる時の最後の状態・要素が挿入された 1 フレーム後に追加され (同時に v-enter が削除される)、トランジション/アニメーションが終了すると削除される。
fade-leave	・消える時の最初の状態・要素がfalseになる直前に、このクラスが適用され、falseになった直後に削除される。
fade-leave-active	・消える時のトランジションの状態・要素が削除される前に追加され、トランジション/アニメーションが終了すると削除さる。・トランジションの継続時間や、変化させたいcssプロパティーを指定する。
fade-leave-to	・消える時の最後の状態・要素がfalseになった直後に、このクラスが適用されトランジション/アニメーションが終了すると削除される。

<template>
  <div>
    <button @click="show = !show">change</button>
    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>
    <p></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>

<style scoped>
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: 5s;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-active {
  transition: 5s;
}
.fade-leave-to {
  opacity: 0;
}
</style>

transitionタグで囲んだ部分に、トランジションが適用される。
トランジションのクラス名は、nameに指定した値を接頭語とする。
例）
name="fade"の場合
fade-enter

また、この場合、非表示の際は、→薄くなってく→5秒かけて透明(opacity 0)になる（と同時にDOMが消去される）となっている。
よって、fade-leave-to　を opacity: 0.5;にした場合は下記のような挙動となる。

トランジションCSSアニメーションを適用する。

<template>
  <div>
    <button @click="show = !show">change</button>
    <transition name="slide">
      <p v-if="show">bye</p>
    </transition>
    <p></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>

<style scoped>
.slide-enter-active {
  animation: slide-in 0.5s;
}

.slide-leave-active {
  animation: slide-in 0.5s reverse;
}

@keyframes slide-in {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

cssアニメーションが、最初の状態と終わりの状態を定義しているため、enter-activeとleave-active以外は不要。

表示させる時（つまり、v-ifがfalseからtrueになる時）は、slide-enter-activeクラスにより、5秒後に表示する。また、animeation属性にslide-inが適用されているので、x軸方向に100pxの位置から0pxの位置に移動する。

消去する時（つまり、v-ifがfalseからtrueになる時）は、slide-leave-activeクラスにより、5秒後に消去する。また、animeation属性にslide-inが適用されて、さらにreverse（逆転)が指定されているので、x軸方向に0pxの位置から1000pxの位置に移動する。

cssトランジションとcssアニメーションを同時に適用させる。

<template>
  <div>
    <button @click="show = !show">change</button>
    <transition name="slide">
      <p v-if="show">bye</p>
    </transition>
    <p></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>

<style scoped>
.slide-enter,
.slide-leave-to {
  opacity: 0;
}

.slide-enter-active {
  animation: slide-in 0.5s;
  transition: opacity 0.5s;
}

.slide-leave-active {
  animation: slide-in 0.5s reverse;
  transition: opacity 0.5s;
}

@keyframes slide-in {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

デフォルトでopacity: 1;は設定されるため、
slide-leave
slide-enter-to
に対する設定は不要。

複数の要素を切り替えるトランジション

下記のように、スライドして表示を切り替えるプログラムを目標とする。

まずは、下記のように、v-elseを配置して切り替えを試みる。

<template>
  <div>
    <button @click="show = !show">change</button>
    <transition name="slide">
      <p v-if="show">さよなら</p>
      <p v-else>こんにちは</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>

<style scoped>
.slide-enter-active {
  animation: slide-in 0.5s;
}

.slide-leave-active {
  animation: slide-in 0.5s reverse;
}

@keyframes slide-in {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

この場合、上記のようにアニメーションがかからない。
これは、なぜかというとvueは効率よく描写しようとするため、同じpタグの場合、DOMをそのまま使用し、中身（こんにちは←→さようなら）だけ変更する。そして、transitionはあくまでDOMが、出現、消去された時に適応されるので、アニメーションが当たらないということが起こる。
これを、回避するために、key属性を与えて、それぞれのDOMを別々の物と認識させる。

      <p v-if="show" key="bye">さよなら</p>
      <p v-else key="hello">こんにちは</p>

上記のように、それぞれのpタグが競合してしまう。

そこで、トランジションモードを設定する。

	内容
in-out	最初に新しい要素がトランジションして、それが完了したら、現在の要素がトランジションアウトする。
out-in	最初に現在の要素がトランジションアウトして、それが完了したら、新しい要素がトランジションインする。

下記のように out-in トランジションを設定する。

    <transition name="slide" mode="out-in">
      <p v-if="show" key="bye">さよなら</p>
      <p v-else key="hello">こんにちは</p>
    </transition>

これで、目的通りの挙動となる。

トランジショングループを使ってリストトランジションを作る

トランジショングループとトランジションの違い

1.複数要素をとることができる。
トランジションは単一要素しかとることができないが、トランジショングループは複数要素をとることができる。

<transition>
 <div></div>
 <div></div>
</transition>

上記は不可。

2.複数要素には必ずkey属性をつける必要がある。

<transition-group>
  <li v-for="number in numbers" :key="number" @click="remove(index)">
    {{ number }}
  </li>
</transition-group>

3.transition-group は　spanタグとなる。
transitionなタグを形成しないが、transition-group はデフォルトでspanタグとなる。

<transition-group>
  <li v-for="number in numbers" :key="number" @click="remove(index)">
    {{ number }}
  </li>
</transition-group>

↓ 生成されるhtml

<span data-v-7ba5bd90="">
  <li data-v-7ba5bd90=""> 8 </li>
  <li data-v-7ba5bd90=""> 10 </li>
  <li data-v-7ba5bd90=""> 5 </li>
  <li data-v-7ba5bd90=""> 11 </li>
  <li data-v-7ba5bd90=""> 2 </li>
</span>

なお、span以外のタグを指定したい場合は、tag="div"のような属性を設定することにより可能となる。

4.transition-group は　mode属性がない。
置き換えるという概念がないため、mode属性はない（必要ない）

5.transition-groupには、７つ目のクラス、v-moveが存在する。

下記のような、追加ボタンを押すとランダムな数字がランダムな位置に追加され、また、数字をクリックすると削除されるプログラムを作るとする。
追加削除の際にフェイドアニメーションにより滑らかな挙動を行う。

<template>
  <div>
    <button @click="add">追加</button>

    <ul>
      <transition-group name="fade">
        <li
          style="cursor: pointer"
          v-for="(number, index) in numbers"
          :key="number"
          @click="remove(index)"
        >
          {{ number }}
        </li>
      </transition-group>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [0, 1, 2],
      nextNumber: 3,
      show: true,
    };
  },
  methods: {
    randomIndex() {
      return Math.floor(Math.random() * this.numbers.length);
    },
    add() {
      this.numbers.splice(this.randomIndex(), 0, this.nextNumber);
      this.nextNumber += 1;
    },
    remove(index) {
      this.numbers.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 3s;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 3s;
}
.fade-leave-to {
  opacity: 0;
}
</style>

上記のように、滑らかに追加されない。
これは、追加ボタンを押した場合、DOMが挿入されてからアニメーションが開始されるため、挿入した位置よりしたのDOMが追加ボタン押下と同時に下方にズレてしまう。

ここで、v-moveクラスを設定することにより、移動するDOMは指定した時間をかけて滑らかに移動することになる。

.fade-move{
  transform: transform 3s;
}

また、削除時については、アニメーションが完了するまで、削除対象のDOMは存在しているので、アニメーション完了後に、下方のDOMが詰めるという挙動になってしまっている。これは、CSSのposition:absoluteでDOMを浮かせて対応する。

.fade-leave-active {
  transition: opacity 3s;
  position: absolute;
}

これで、目的とする挙動が行われる。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up