vue中 transition组件使用总结

博客园比较啃爹啊，随笔只能手写，之前写在有道云笔记里面的内容也复制不了，忧伤.....

长话短说，看官方的transition 的讲解，可能是内容太多了，或者就是本人太辣鸡了，看的有点懵逼，但是项目中有需要使用，套用了官方的例子，勉强算是完成了想要的效果，

回过头来总结一波还是有必要的，，刚开始看到有6个属性的时候，我是拒绝的，纳尼，6个，这谁顶得住啊，不过好在有一张图，一图胜千言呐，

 

更具图呢，将6个属性两两分组，分成三组来看待，

Enter的 头和leave的尾一组， 就是刚进的初始状态跟离开的结束状态，这两表现是一致的

Enter的尾和Leave的头一组，进去的结束状态和离开的开始状态，也是一致的

这让我不得不想起一句话，你荣耀的定点就是你进入下坡的起点，这个设计还是很有哲理的，对吧

 

然后就是v-enter-active跟 v-leave-active这两货了，这两个主要就是用来设置过渡的持续时间以及过渡的表现形式（缓动还是匀速...）

这样，一般的过渡效果就可以完成了。

感谢各位看官的收看，如果写得不好的，尽管提意见，谢谢啦！！！

 

转载于:https://www.cnblogs.com/ysla/p/11546344.html