美文网首页我爱编程
【Vue15】动画封装

【Vue15】动画封装

作者: 八宝君 | 来源:发表于2018-05-25 04:02 被阅读0次

动画封装,也就是让我们的动画变的可复用。
比如说渐隐渐显的效果,其实用的很多,那我们就可以将它封装起来。
为了保证唯一性,不使用css动画,转使用js动画。

对于fade这种动画组件的编写,模板处这样调用,外层包裹的<fade></fade>是我们编写的动画组件名。
<div>hello world</div>对应的是slot插槽处的内容。

模板处
这里是根组件处,show绑定的对应值和切换逻辑
重点是动画组件的编写
fade动画组件编写
解析一下这张图:
1.组件名称叫做fade;
2.组件的模板写的是transition那串,slot是外部传入的dom元素
3.props接收外部传入的变量来控制外部传入的dom是否显示;
4.入场前和入场时的js动画写在methods内。
5.入场时的函数内,要接受done,最后要执行一下done(),表明动画结束啦

这样所有的动画都定义在组件内,外部只需要调用,并且传入一些自己想要的dom内容即可。
transition-group同理。

相关文章

网友评论

    本文标题:【Vue15】动画封装

    本文链接:https://www.haomeiwen.com/subject/udzejftx.html