【Vue15】动画封装

动画封装，也就是让我们的动画变的可复用。
比如说渐隐渐显的效果，其实用的很多，那我们就可以将它封装起来。
为了保证唯一性，不使用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同理。