什么是过渡和动画
元素在显示和隐藏时，实现过渡或者动画的效果，常用的过滤和动画都是使用CSS来实现的。
- 在CSS中操作transition（过渡）或 animation（动画）达到不同效果
- 为目标元素添加一个父元素<trasition name="xxx">，让父元素通过自动应用class类名来达到效果
- 过滤与动画时，会为对应元素动态的添加相关class类名
- xxx-enter：定义显示前的效果
- xxx-enter-active：定义显示过程的效果
- xxx-enter-to：定义显示后的效果
- xxx-leave：定义隐藏前的效果
- xxx-leave-active：定义隐藏过程的效果
- xxx-leave-to：定义隐藏后的效果
过渡效果一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> <style> /* 显示或隐藏的过渡效果，zz就是下面定义的name值 */ /* .zz-enter-active进入中，.zz-leave-active离开中的效果 */ .zz-enter-active, .zz-leave-active{ transition: opacity 1s; /* 过渡，渐变效果持续时间为1s*/ } /* 显示前或隐藏后的效果 */ /* .zz-enter进入前，.zz-leave-to离开后 */ .zz-enter, .zz-leave-to{ opacity: 0; /* 都是隐藏效果 */ } </style> </head> <body> <div id="app"> <button @click="show =!show">渐变过渡</button> <transition name="zz"><!-- name的值自定义，后面要用 --> <p v-show="show">过渡一</p> <!-- v-show为false就不显示 --> </transition> </div> <script> new Vue({ el: "#app", data: { show: true, } }) </script> </body> </html>
过渡效果二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> <style> /* 可以针对显示和隐藏指定不同的效果 */ /* 显示过渡效果1s */ .zz-enter-active{ transition: all 1s; /* all所有属性，持续1s*/ } /* 隐藏过渡效果3s */ .zz-leave-active{ transition: all 3s; /* all所有属性，持续3s */ } /* 显示前和隐藏后的效果 */ .zz-enter, .zz-leave-to{ opacity: 0; /* 都是隐藏效果 */ transform: translateX(10px); /* 水平方向移动10px */ } </style> </head> <body> <div id="app"> <button @click="show =!show">渐变平滑过渡</button> <transition name="zz"><!-- name的值自定义，后面要用 --> <p v-show="show">过渡二</p> <!-- v-show为false就不显示 --> </transition> </div> <script> new Vue({ el: "#app", data: { show: true, } }) </script> </body> </html>
动画
CSS动画用法同CSS过渡，只不过采用animation为指定动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> <style> /* 显示过程中的动画效果 */ .zz-enter-active{ animation: zz-in 1s; } /* 隐藏过程中的动画效果 */ .zz-leave-active{ animation: zz-in 1s reverse; } @keyframes zz-in{ 0% { /*持续时长百分比，比如针对1s： 0%代表0秒，50%代表0.5*/ transform: scale(0); /*缩小为0*/ } 50% { transform: scale(1.5); /*放大1.5倍*/ } 100% { transform: scale(1); /*原始大小*/ } } </style> </head> <body> <div id="app"> <button @click="show =!show">放大缩小动画</button> <transition name="zz"><!-- name的值自定义，后面要用 --> <p v-show="show">我是动画</p> <!-- v-show为false就不显示 --> </transition> </div> <script> new Vue({ el: "#app", data: { show: true, } }) </script> </body> </html>
