VueのTransitionを使う方法を簡潔に書いてみる
VueのTransition（ふわっと表示させるような）が使えるようになる記事を目指して書いています。
Vue の Transition を使う方法
以下の例は、ボタンを押すと下の文字がふわっと消えたりふわっと出現したりします。
<template>
<div class="container">
<button @click="toggleModal">変わるよ</button>
<!-- fadeという名前のアニメーションを指定しています -->
<transition name="fade">
<!-- v-ifやv-showで表示非表示が切り替わる部分をtransitionタグで囲います -->
<div v-if="modal">True</div>
</transition>
</div>
</template>
<script setup>
import { ref } from "vue"
const modal = ref(true)
const toggleModal = () => {
modal.value = !modal.value
}
</script>
<style scoped>
.container {
margin: 100px;
width: 100%;
}
/* fadeという名前のアニメーション */
/* enter-activeなどは、いつアニメーションをするかを指定している */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.4s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>実装の解説
v-if や v-show で表示が切り替わる部分のタグを transition タグで囲う
<transition name="fade">
<div v-if="modal">True</div>
</transition>transition タグの直下にv-if やv-showがあるタグがきます。
以下のように、直下にv-if等があれば良く、その<div>の中にさらにタグがあっても大丈夫です。
<transition name="fade">
<div v-if="modal">
<div>直下に`v-if`があれば</div>
<div>複数タグがあっても大丈夫</div>
</div>
</transition>transition には name を指定
<transition name="fade">
<div v-if="modal">True</div>
</transition>今回は、name="fade"と書かれており、 fade という名前がついています。
style にアニメーションする内容を書く
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.4s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}fadeという name を付けたので、
.fade-enter-active,.fade-leave-active,.fade-enter,.fade-leave-to
というクラス名になっています。
fade-以降は、アニメーションのタイミングを指定する、決まった名前になり、Vue 側の API で指定されています。
今回は 0.4 秒でフェードアウトされるように書いています。
アレンジする
アニメーションをアレンジしていきます。
アニメーションのアレンジの仕方は、Vue の公式サイトや CSS のアニメーションで検索すると色々見つかると思います。
.fade-leave-active {
transform: translateX(100px);
transition: all 0.4s ease;
}CSS だけ変えてみました。
上のコードに修正すると、ボタンを押すと 0.4 秒かけて右に 100px スライドして表示が消えます。
このように、CSS だけ修正していけばアニメーションを微調整させることができます。
ぜひ使ってみてください！
Transition がうまく動作しない時
v-for を使っていないか
v-forを使っている場合、Transition では動きません。
TransitionGroup というコンポーネントを使います。
詳しくは以下の記事に書いてあります。
⇨Vue で配列に追加する時に、表示を Transition する方法
Transition の name と連携した CSS クラス名になっているか
今回の例では、name="fade"にしました。
クラス名は、fade-enterなど、nameで指定したfade-を prefix で書きましょう。
また、prefix 後のenterの部分は最初から Vue 側で準備されている props ですので、指定されたものを使う必要があります。
以上、Vue の Transition を使う方法についての記事でした。
誰かの参考になれば幸いでございます。
