Test.vue:元素外面包一层transition，展示的时候就默认调用style里面的v-enter-action和v-leave-action执行进入和退出效果，appear上来默认展示动画效果
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<!--元素外面包一层transition，展示的时候就默认调用style里面的v-enter-action和v-leave-action执行进入和退出效果，appear上来默认展示动画效果-->
<transition appear>
<h1 v-show="isShow">你好啊！</h1>
</transition>
</div>
</template>
<script>
export default {
name: "MyTest",
data(){
return{
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: orange;
}
.v-enter-active{
animation: liner 0.5s linear;
}
.v-leave-active{
animation: liner 0.5s linear reverse;
}
/*这里定义的liner名称随便，供上面animation用*/
@keyframes liner {
from{
transform: translateX(-100%);
}
go{
transform: translateX(0px);
}
}
</style>
Test2.vue : 多条数据需要用transition-group展示，name属性与style里面的要一样，多条数据需要设置key值
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<!--多条数据需要用transition-group展示，name属性与style里面的要一样，多条数据需要设置key值-->
<transition-group name="hello" appear>
<h1 v-show="!isShow" key="1">你好啊！</h1>
<h1 v-show="isShow" key="2">liner！</h1>
</transition-group>
</div>
</template>
<script>
export default {
name: "MyTest",
data(){
return{
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: orange;
}
/*进入的起点，离开的终点*/
.hello-enter,.hello-leave-to{
transform: translateX(-100%);
}
/*进入的终点，离开的起点*/
.hello-enter-to,.hello-leave{
transform: translateX(0);
}
/*进入，离开的动作过程触发效果*/
.hello-enter-active,.hello-leave-active{
transition: 0.5s linear;
}
</style>Test3.vue : 安装第三方样式库animate.css
npm install animate.css先导入import 'animate.css'，多条数据transition-group，name用的animate.css库中的name，进出离开效果自动触发，enter-active-class和leave-avtive-class绑定的效果
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<!--多条数据transition-group，name用的animate.css库中的name，进出离开效果自动触发，enter-active-class和leave-avtive-class绑定的效果-->
<transition-group
name="animate__animated animate__bounce"
appear
enter-active-class="animate__swing"
leave-active-class="animate__bounceOutUp"
>
<h1 v-show="!isShow" key="1">你好啊！</h1>
<h1 v-show="isShow" key="2">liner！</h1>
</transition-group>
</div>
</template>
<script>
import 'animate.css'
export default {
name: "MyTest",
data(){
return{
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: orange;
}
</style>
