VUE课程---19、动画
一、总结
一句话总结：
vue动画有进入和出去两个大状态，设置动画的话用transition原生包裹起来，transition的name属性指定动画的名称
<style> .xxx-enter-active, .xxx-leave-active{ transition: all .3s ease; } .xxx-enter,.xxx-leave-to{ opacity: 0; font-size: 10px; } </style> <div id="app"> <transition name="xxx"> <p v-show="isShow">{{msg}}</p> </transition> <button @click="isShow=!isShow">切换</button> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { //isShow是true，默认元素是显示状态，下一个状态是离开状态，所以对应的就是v-leave状态 isShow:true, msg: '我有一只小毛驴，我永远也不骑' } }); </script>
1、如何理解vue动画的进入和出去两个大状态？
vue动画有进入和出去两个大状态，可以简单的通过元素的显示和隐藏来理解，比如点击一下toggle按钮让元素显示可以看做元素的进入状态，再点一下toggle按钮让元素隐藏可以看做元素的离开状态
2、为什么要有动画？
动画能够提高用户的体验，帮助用户更好的理解页面中的功能
3、vue动画的进去和离开状态？
进入状态有（v-enter（进入初始状态）、v-enter-to（进入后状态）、v-enter-active（进入的整个状态））
离开状态有（v-leave（离开初始状态）、v-leave-to（离开后状态）、v-leave-active（离开的整个状态））
4、v-enter为什么一般和v-leave-to一起设置，v-enter-to为什么一般和v-leave一起设置？
v-enter表示进入初始状态，v-leave-to表示离开后状态，一般离开后的状态就是进入的初始状态
v-enter-to表示进入后状态，v-leave表示离开初始状态，一般进入后状态就是离开的初始状态
5、vue设置动画实例？
要设置动画的元素用transition原生包裹起来，transition的name属性指定动画的名称
<style> .xxx-enter-active, .xxx-leave-active{ transition: all .3s ease; } .xxx-enter,.xxx-leave-to{ opacity: 0; font-size: 10px; } </style> <div id="app"> <transition name="xxx"> <p v-show="isShow">{{msg}}</p> </transition> <button @click="isShow=!isShow">切换</button> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { //isShow是true，默认元素是显示状态，下一个状态是离开状态，所以对应的就是v-leave状态 isShow:true, msg: '我有一只小毛驴，我永远也不骑' } }); </script>
6、当元素默认显示的时候（也就是isShow是true的时候），对应的状态是什么？
isShow是true，默认元素是显示状态，下一个状态是离开状态，所以对应的就是v-leave状态
二、动画
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>1、动画</title> 6 <style> 7 .xxx-enter-active, .xxx-leave-active{ 8 transition: all .3s ease; 9 } 10 .xxx-enter,.xxx-leave-to{ 11 opacity: 0; 12 font-size: 10px; 13 } 14 </style> 15 </head> 16 <body> 17 <!-- 18 19 vue的动画一般说的是toggle的两个状态，所以 20 21 进入的状态：toggle第一下 22 v-enter -> v-enter-to 23 出去的状态：toggle第二下 24 v-leave -> v-leave-to 25 26 所以一般 v-enter-to 和 v-leave 是一样的 27 v-enter 和 v-leave-to 一般是一样的 28 29 v-enter-active：进入的整个状态 30 v-leave-active：出去的整个状态 31 32 --> 33 <div id="app"> 34 <transition name="xxx"> 35 <p v-show="isShow">{{msg}}</p> 36 </transition> 37 <button @click="isShow=!isShow">切换</button> 38 </div> 39 <script src="../js/vue.js"></script> 40 <script> 41 let vm = new Vue({ 42 el: '#app', 43 data: { 44 //isShow是true，默认元素是显示状态，下一个状态是离开状态，所以对应的就是v-leave状态 45 isShow:true, 46 msg: '我有一只小毛驴，我永远也不骑' 47 } 48 }); 49 </script> 50 </body> 51 </html>
