Vue3 - transitionを使ってみる。

vue.jsではtransitionという機能を利用して、UIの表示を切り替える際にエフェクトをかける事ができる。
例えば、クリックした要素を消すような場合に、エフェクトをかけるなどの処理が簡単に書ける。

対応に必要な作業は次の２つ。

• 対象の要素を タグで囲む。
• 開始時点・移行中・終了時点それぞれのcssを定義する

わざわざjsで実装をすることなく、

例

<template>
    <transition name="fade">
        <a v-if="show" @click="show = !show">トランジションサンプル</a>
    </transition>
</template>

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

<style scoped>
a {
    padding: 10px;
    background-color: #ccc;
    border-radius: 4px;
}
a:hover {
    text-decoration: underline;
}

.fade-enter {
    opacity: 1;
}

.fade-leave-active, 
.fade-enter-active {
    transition: 0.5s ease-out;
}

.fade-leave {
    opacity: 0;
}
</style>

単純なエフェクトであれば、vueの使わずに書くこともできるので、どういった場面で効果を発揮する機能なのかは確認が必要そう。

<transition-group>

リストのトランジションは <transition-group> タグで囲む事でまとめて指定することができる。

name には トランジションの名前し、tag にはリストを囲む親のタグを指定できる。tagにulを指定して、小要素はliで出力する、といったことができる。

<transition-group name="slide-up" tag="div">
    <span v-for="value in items" :key="value">
        {{ value }}
    </span>
</transition-group>

<script>
export default {
    data() {
        return {
            items: ['Hoge', 'Fuga', 'Buzz', 'Foo']
        }
    }
}
</script>

<style>
.slide-up-enter {
  transform: translateY(10px);
  opacity: 0;
}
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.2s ease;
}
.slide-up-leave-to {
  transform: translateX(-10px);
  opacity: 0;
}
</style>

参考サイト

v3.vuejs.org