继续看最重要的是两个方法，enter和leave。通过在这两个方法上打断点得知，执行这两个方法的之前，vnode已经创建了真实dom, 并挂载到了vnode.elm上。其中这段代码比较关键
// el就是真实dom节点 beforeEnterHook && beforeEnterHook(el) if (expectsCSS) { addTransitionClass(el, startClass) addTransitionClass(el, activeClass) nextFrame(() => { addTransitionClass(el, toClass) removeTransitionClass(el, startClass) if (!cb.cancelled && !userWantsControl) { if (isValidDuration(explicitEnterDuration)) { setTimeout(cb, explicitEnterDuration) } else { whenTransitionEnds(el, type, cb) } } }) }
首先给el添加了startClass和activeClass, 此时dom节点还未插入到文档流，推测应该是在create或activate勾子执行完以后，该节点被插入文档流的。nextFrame方法的实现如下, 如requestAnimationFrame不存在，用setTimeout代替
const raf = inBrowser && window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : setTimeout export function nextFrame (fn: Function) { raf(() => { raf(fn) }) }
这种方式的nextFrame实现，正如官方文档中所说的在下一帧添加了toClass，并remove掉startClass，最后在过渡效果结束以后，remove掉了所有的过渡相关class。至此‘进入过渡'的部分完毕。
再来看‘离开过渡'的方法leave，在leave方法中打断点，发现html标签的状态如下
<p>xxx</p> <!---->
<!----> 为vue的占位符，当元素通过v-if隐藏后，会在原来位置留下占位符。那就说明，当leave方法被触发时，原本的真实dom元素已经隐藏掉了(从vnode中被移除)，而正在显示的元素，只是一个真实dom的副本。
leave方法关键代码其实和enter基本一致，只不过是将startClass换为了leaveClass等，还有处理一些动画生命周期的勾子函数。在动画结束后，调用了由组件生命周期remove传入的rm方法，把这个dom元素的副本移出了文档流。