为什么要学习过渡和动画：
提高用户体验 与 页面的交互性
从而 影响用户的行为，引导用户，帮助用户看到动作行为的反馈
什么是过渡、动画
过渡
从一个状态向另一个状态插入值，新的状态替换了旧的状态
vue中提供了过渡组件 transition
语法格式：
transition 放置需要添加过渡的元素 div
使用name属性设置前缀 fade-
如果没有设置name v-
vue 标签内部提供了三个 进入过渡 以及 3个离开过渡的类
进入
v-enter 进入过渡的开始状态，作用于开始的一帧
v-enter-active 进入过渡生效时的状态，作用于整个过程
v-enter-to 进入过渡的结束状态，作用于结束的一帧
离开
v-leave 离开过渡的开始状态，作用于开始的一帧
v-leave-active 离开过渡生效时的状态，作用于整个过程
v-leave-to 离开过渡的结束状态，作用于结束的一帧
语法格式代码：
<transition name="fade"> <!-- 添加过渡的div标签 --> <div></div> </transition>
简单的使用案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .v-enter-active,.v-leave-active{ transition: opacity 2.5s; } .v-enter,.v-leave-to{ opacity: 0; } /* 过渡动画的开始： v-enter 开始、v-enter-active 过程、v-enter-to 结束 过渡动画的结束： v-leave 开始、v-leave-active 过程、v-leave-to 结束 */ </style> </head> <body> <!-- 视图 --> <div id="app"> <button v-on:click="show = !show">toggle - 切换</button> <transition> <!-- 过渡标签 --> <h3 v-if="show">哈哈哈哈哈哈</h3> </transition> </div> <script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el:"#app", data:{ show:true } }) </script> </body> </html>
效果就是点击内容在几秒后消失，再次点击几秒后显示
vue动画效果的实现案例：
@keyframes：定义动画关键子
scale：按括号里的值放大缩小
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .v-enter-active { animation: bounce-in .5s; } .v-leave-active { animation: bounce-in .5s reverse; } /* @keyframes 定义动画关键子 */ /* scale 按括号里的值放大缩小 */ @keyframes bounce-in { 0% { transform: scale(0); color:red; } 50% { transform: scale(1.5); } 100% { transform: scale(1); color: green; } } </style> </head> <body> <!-- 视图 --> <div id="app"> <button v-on:click="show = !show">toggle - 切换</button> <transition> <!-- 过渡标签 --> <h3 v-if="show">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</h3> </transition> </div> <script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el:"#app", data:{ show:true } }) </script> </body> </html>
效果是点击放大后缩小，并变色，最后缩小到消失，再次点击还是放大后缩小，并变色，最后恢复到默认样式。
总结：
以上就是 vue 中的过渡和动画，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
