transition 与 transition-group

transition 

 

类似于slot，首先拿到它的子元素，

然后将父元素transition元素上你写的书写解析给child.data.transition

 

这样child.data.transition中就有了需要的数据，

 

 

 

之后在组件初始化过程中定义了很多钩子函数，在这些钩子函数间为组件添加类(css)

 

需要v-if和v-show来触发，是因为 内部通过在create 和 active remove这些钩子中，处理了自定义的entering leaving这些钩子，在这些钩子函数间为组件添加类(css)

 

 

(

资料： 

过渡动画提供了 2 个时机，一个是 create 和 activate 的时候提供了 entering 进入动画，一个是 remove 的时候提供了 leaving 离开动画。

）

 

内部使用了window.requestAnimationFrame来执行添加css类和删除css类的操作。

 

 

 

总结：

vue的transition实现分为下面几个步骤

1.如果应用了css过渡或动画，在恰当的时机添加/删除CSS类名。

2.如果过渡组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用。

3.如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM操作（插入/删除）在下一帧中立即执行。

所以真正执行的是我们写的CSS或者是JavaScript钩子函数，而Vue的<transition>只是帮我们很好地管理了这些CSS的添加/删除，以及钩子函数的执行时机。

 

 

 

transition-group

transition-group作用是给多个元素添加动画

与transition只能作用于第一个子，没有真实dom不同，transition-group会生成一个真实节点，不指定的话默认是span。而且需要给内部的多个元素指定key，因为在处理动画的时要通过key找到对应的元素。