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-groupname="animate__animated animate__bounce"appearenter-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>