学习Vue封装的过渡与动画总结

今天学习了Vue封装的过渡与动画，接下来说一下Vue是如何实现的，首先原生的方法是在style元素中给指定元素添加过渡的过渡或动画，但Vue就不需要直接获取到需要过渡或动画的元素，而是使用一个<transition>的标签来包裹住想要过渡或动画的元素，在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名，因为不直接获取元素所以想要指定元素，那么就需要给transtion标签配置一个name属性来指定（不配置默认是v），这时样式就可以通过name属性来确定是哪个样式需要过渡或动画，下面用一张图片来说一下语法的使用：

Enter这边元素进入的语法，v-enter代表元素进入的起点、v-enter-to代表元素进入的终点、v-enter-active代表着元素进入从起点到终点之间的这个过程，这个过程就是过渡动画。Leave这边元素离开的语法，v-leave代表的是离开的起点、v-leave-to代表的是离开的终点，v-leave-active代表元素离开从起点到终点的过程。如果<transition>标签配置了name属性，那么就用属性值来代替默认的v即可指定元素实现了，其他里面的动画参数和原来的css样式语法是一样的。如果想要多个元素（比如：列表）同时需要动画或过渡则需要一个新的标签<transition-group>来对元素进行包裹即可实现多个元素的同时动画效果。

Vue还允许我们借助引入第三方库来快速实现且好看动画效果，通过import引入之后具体的使用方法要看第三方库的使用说明。