过度效果

1. 新建组件Test2并在App组件中进行注册和引用
2. 给组价中需使用动画的标签使用transition标签进行包裹
3. 写好标签的初始样式
4. 配置过度动画

App组件

<template>
    <div class="container">
        <Test/>
        <hr>
        <Test2/>
    </div>
</template>
​
<script>
import Test from "@/components/Test.vue";
import Test2 from "@/components/Test2.vue";
​
export default {
    name: 'App',
    components: {
        Test,
        Test2
    },
}
</script>

Test2组件

<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "Test2",
    data() {
        return {
            isShow: true
        }
    }
})
</script>

<template>
    <div>
        <button @click="isShow=!isShow">显示/隐藏</button>
        <transition name="tit" appear>
            <h1 v-show="isShow">你好啊</h1>
        </transition>
    </div>
</template>

<style scoped>
h1 {
    background-color: orangered;
}

/*进入的起点 ，
离开的终点*/
.tit-enter,
.tit-leave-to {
    transform: translateX(-100%);
}

/*进入的终点，
离开的起点 */
.tit-enter-to,
.tit-leave {
    transform: translateX(0);
}

.tit-enter-active,.tit-leave-active{
    transition: linear 0.5s;
}
</style>

多元素过度

1. 使用transition-group标签将需要进行动画切换的标签包裹好
2. 给每一个需要进行动画切换的标签一个唯一的key值
3. 其他与单元素过度相同

Test2组件

        <transition-group name="tit" appear>
            <h1 v-show="isShow" key="1">你好啊</h1>
            <h1 v-show="isShow" key="2">测试一下</h1>
        </transition-group>