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

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

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

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