Vue提供了transition组件，使用户可以更便捷地添加过渡动画效果。
transition组件
transition组件也是一个抽象组件，并不会渲染出真实dom。Vue会在其第一个真实子元素上添加过渡效果。
props
render
这里将render分为两部分，第一部分界定真正添加过渡效果的子节点。
第一部分
首先获取transition的子元素(通过默认插槽$slots.default)，子节点需要有以下特征：
1. 子元素存在且非文本节点
2. 只存在单个子元素，否则会控制台提示用transition-group
3.hasParentTransition的目的是在transition组件是所在父组件的根节点，且父组件外部也有transition组件，即父组件也被添加了过渡效果的情况下，防止重复添加过渡效果。这里需要对parent有了解。
在vue.prototype._render函数执行的时候会给render函数渲染返回的_vnode设置parent(就是占位符vnode)。那么，只有当在当前组件中transition组件为根组件时，transition组件的$vnode才有parent属性；且当前组件的占位符节点也具有transition属性，即，当前组件的占位符节点外面也包裹了transition属性。这就说明重复添加了过渡效果，只需要执行最外层的过渡效果即可。
4. getRealChild，避免子元素也是抽象组件，需要获取真实子元素。
第二部分
1. 定义id及真实子节点的key
2. extractTransitionData将transition组件绑定的属性及时间给真实子节点
3. 通过transition组件的_vnode属性获取组件的根节点，定义为oldChild，更新oldChild属性
4. 根据mode类别做相应动作。
mode
这里将mode单独拎出来说明一下。
-
in-out：新元素先进行过渡，完成之后当前元素过渡离开。 -
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
官方说过渡模式的出现是为了弥补多个元素动画之间不协调。例如进入/离开效果同时出现：cn.vuejs.org/v2/guide/tr…
其实现原理就是在data.hook属性中添加了很多hook，使得可以控制特效动画执行顺序。
最后
其实transition组件也不难，主要是各种前提条件判断的。
最绕的一点还是做边界检测，如何做到防止重复添加过渡效果
在整体分析下来，似乎并没有发现transition组件是如何控制过渡动画的，也不知道用户定义的钩子函数及各种属性如何读取及调用。