vue中 transition组件使用总结

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

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

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

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

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

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

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

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

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

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

猜你喜欢

转载自www.cnblogs.com/ysla/p/11546344.html