首页 > 其他 > 详细

vue中 transition组件使用总结

时间:2019-09-19 01:55:53      阅读:333      评论:0      收藏:0      [点我收藏+]

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

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

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

 

技术分享图片

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

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

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

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

 

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

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

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

 

vue中 transition组件使用总结

原文:https://www.cnblogs.com/ysla/p/11546344.html

(2)
(2)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!