1.定义动画帧
<template><div><button @click="isShow=!isShow">显示/隐藏</button><!-- // :appear="true"表示加载即带有动画效果 --><transition :appear="true"><div class="st" v-show="isShow"><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2></div></transition><!-- 也可以自己设置名字 --><transition name="hello" :appear="true"><h2 class="hi" v-show="isShow">你好</h2></transition></div></template><script>export default {data() {return {name:"张三",sex:"男",isShow:true}}}</script><style scoped>.st{background-color: aqua;}.hi{background-color: blanchedalmond;}/* 定义一个动画帧 */@keyframes stu {from{transform: translateX(-100%);}to{transform: translateX(0px);}}/* 不命名固定格式 */.v-enter-active{animation: stu 1s;}.v-leave-active{/* 反转 */animation: stu 1s reverse;}/* 自己命名固定格式 */.hello-enter-active{/* linear匀速 */animation: stu 1s linear;}.hello-leave-active{/* 反转 */animation: stu 1s reverse;}</style>
2.过度效果
<template><div><button @click="isShow=!isShow">显示/隐藏</button><transition-group :appear="true"><h2 v-show="isShow" key="1">学校</h2><h2 v-show="isShow" key="2">清华</h2></transition-group></div></template><script>export default {data() {return {isShow:true}},}</script><style scoped>h2{background-color: chartreuse;}/* 进入的起点 */ /* 离开的终点 */.v-enter,.v-leave-to{transform: translateX(-100%);}/* 进入的终点 *//* 离开的起点 */.v-enter-to,.v-leave{transform: translateX(0);}.v-enter-active,.v-leave-active{transition: 1s linear;}</style>
3.集成第三方动画animate.css
*npm第三方动画库：npm官网下搜索animate.css
进入主页面：
*安装第三方库：npm install animate.css
*引入：import 'animate.css'
*使用：
1.引入类名：name="animate__animated animate__bounce"
2.添加进入动画：enter-active-class="animate__swing"
3.添加离开动画：
leave-active-class=” animate__bounceOutDown”
<template><div><button @click="isShow=!isShow">显示/隐藏</button><!-- 引入类名：name="animate__animated animate__bounce" --><!-- 去库里选一个进入的动画 --><!-- 选离开的动画 --><transition :appear="true"name="animate__animated animate__bounce" enter-active-class="animate__swing"leave-active-class="animate__bounceOutDown"><h2 v-show="isShow">集成第三方动画</h2></transition></div></template><script>import 'animate.css'export default {data() {return {isShow:true}},}</script><style scoped>h2{background-color: deeppink;}</style>
