• transition
    • 内置组件
    • transition module
    • entering
    • leaving
    • 总结

    transition

    在我们平时的前端项目开发中，经常会遇到如下需求，一个 DOM 节点的插入和删除或者是显示和隐藏，我们不想让它特别生硬，通常会考虑加一些过渡效果。

    Vue.js 除了实现了强大的数据驱动，组件化的能力，也给我们提供了一整套过渡的解决方案。它内置了 <transition> 组件，我们可以利用它配合一些 CSS3 样式很方便地实现过渡动画，也可以利用它配合 JavaScript 的钩子函数实现过渡动画，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡：

    • 条件渲染 (使用 v-if)
    • 条件展示 (使用 v-show)
    • 动态组件
    • 组件根节点
      那么举一个最简单的实例，如下：
    1. let vm = new Vue({
    2.   el: '#app',
    3.   template: '<div id="demo">' +
    4.   '<button v-on:click="show = !show">' +
    5.   'Toggle' +
    6.   '</button>' +
    7.   '<transition :appear="true" name="fade">' +
    8.   '<p v-if="show">hello</p>' +
    9.   '</transition>' +
    10.   '</div>',
    11.   data() {
    12.     return {
    13.       show: true
    14.     }
    15.   }
    16. })
    1. .fade-enter-active, .fade-leave-active {
    2.   transition: opacity .5s;
    3. }
    4. .fade-enter, .fade-leave-to {
    5.   opacity: 0;
    6. }

    当我们点击按钮切换显示状态的时候，被 <transition> 包裹的内容会有过渡动画。那么接下来我们从源码的角度来分析它的实现原理。

    内置组件

    <transition> 组件和 <keep-alive> 组件一样，都是 Vue 的内置组件，而 <transition> 的定义在 src/platforms/web/runtime/component/transtion.js 中，之所以在这里定义，是因为 <transition> 组件是 web 平台独有的，先来看一下它的实现：

    1. export default {
    2.   name: 'transition',
    3.   props: transitionProps,
    4.   abstract: true,
    6.   render (h: Function) {
    7.     let children: any = this.$slots.default
    8.     if (!children) {
    9.       return
    10.     }
    12.     // filter out text nodes (possible whitespaces)
    13.     children = children.filter((c: VNode) => c.tag || isAsyncPlaceholder(c))
    14.     /* istanbul ignore if */
    15.     if (!children.length) {
    16.       return
    17.     }
    19.     // warn multiple elements
    20.     if (process.env.NODE_ENV !== 'production' && children.length > 1) {
    21.       warn(
    22.         '<transition> can only be used on a single element. Use ' +
    23.         '<transition-group> for lists.',
    24.         this.$parent
    25.       )
    26.     }
    28.     const mode: string = this.mode
    30.     // warn invalid mode
    31.     if (process.env.NODE_ENV !== 'production' &&
    32.       mode && mode !== 'in-out' && mode !== 'out-in'
    33.     ) {
    34.       warn(
    35.         'invalid <transition> mode: ' + mode,
    36.         this.$parent
    37.       )
    38.     }
    40.     const rawChild: VNode = children[0]
    42.     // if this is a component root node and the component's
    43.     // parent container node also has transition, skip.
    44.     if (hasParentTransition(this.$vnode)) {
    45.       return rawChild
    46.     }
    48.     // apply transition data to child
    49.     // use getRealChild() to ignore abstract components e.g. keep-alive
    50.     const child: ?VNode = getRealChild(rawChild)
    51.     /* istanbul ignore if */
    52.     if (!child) {
    53.       return rawChild
    54.     }
    56.     if (this._leaving) {
    57.       return placeholder(h, rawChild)
    58.     }
    60.     // ensure a key that is unique to the vnode type and to this transition
    61.     // component instance. This key will be used to remove pending leaving nodes
    62.     // during entering.
    63.     const id: string = `__transition-${this._uid}-`
    64.     child.key = child.key == null
    65.       ? child.isComment
    66.         ? id + 'comment'
    67.         : id + child.tag
    68.       : isPrimitive(child.key)
    69.         ? (String(child.key).indexOf(id) === 0 ? child.key : id + child.key)
    70.         : child.key
    72.     const data: Object = (child.data || (child.data = {})).transition = extractTransitionData(this)
    73.     const oldRawChild: VNode = this._vnode
    74.     const oldChild: VNode = getRealChild(oldRawChild)
    76.     // mark v-show
    77.     // so that the transition module can hand over the control to the directive
    78.     if (child.data.directives && child.data.directives.some(d => d.name === 'show')) {
    79.       child.data.show = true
    80.     }
    82.     if (
    83.       oldChild &&
    84.       oldChild.data &&
    85.       !isSameChild(child, oldChild) &&
    86.       !isAsyncPlaceholder(oldChild) &&
    87.       // #6687 component root is a comment node
    88.       !(oldChild.componentInstance && oldChild.componentInstance._vnode.isComment)
    89.     ) {
    90.       // replace old child transition data with fresh one
    91.       // important for dynamic transitions!
    92.       const oldData: Object = oldChild.data.transition = extend({}, data)
    93.       // handle transition mode
    94.       if (mode === 'out-in') {
    95.         // return placeholder node and queue update when leave finishes
    96.         this._leaving = true
    97.         mergeVNodeHook(oldData, 'afterLeave', () => {
    98.           this._leaving = false
    99.           this.$forceUpdate()
    100.         })
    101.         return placeholder(h, rawChild)
    102.       } else if (mode === 'in-out') {
    103.         if (isAsyncPlaceholder(child)) {
    104.           return oldRawChild
    105.         }
    106.         let delayedLeave
    107.         const performLeave = () => { delayedLeave() }
    108.         mergeVNodeHook(data, 'afterEnter', performLeave)
    109.         mergeVNodeHook(data, 'enterCancelled', performLeave)
    110.         mergeVNodeHook(oldData, 'delayLeave', leave => { delayedLeave = leave })
    111.       }
    112.     }
    114.     return rawChild
    115.   }
    116. }

    <transition> 组件和 <keep-alive> 组件有几点实现类似，同样是抽象组件，同样直接实现 render 函数，同样利用了默认插槽。<transition> 组件非常灵活，支持的 props 非常多：

    1. export const transitionProps = {
    2.   name: String,
    3.   appear: Boolean,
    4.   css: Boolean,
    5.   mode: String,
    6.   type: String,
    7.   enterClass: String,
    8.   leaveClass: String,
    9.   enterToClass: String,
    10.   leaveToClass: String,
    11.   enterActiveClass: String,
    12.   leaveActiveClass: String,
    13.   appearClass: String,
    14.   appearActiveClass: String,
    15.   appearToClass: String,
    16.   duration: [Number, String, Object]
    17. }

    这些配置我们稍后会分析它们的作用，<transition> 组件另一个重要的就是 render 函数的实现，render 函数主要作用就是渲染生成 vnode，下面来看一下这部分的逻辑。

    • 处理 children
    1. let children: any = this.$slots.default
    2. if (!children) {
    3.   return
    4. }
    6. // filter out text nodes (possible whitespaces)
    7. children = children.filter((c: VNode) => c.tag || isAsyncPlaceholder(c))
    8. /* istanbul ignore if */
    9. if (!children.length) {
    10.   return
    11. }
    13. // warn multiple elements
    14. if (process.env.NODE_ENV !== 'production' && children.length > 1) {
    15.   warn(
    16.     '<transition> can only be used on a single element. Use ' +
    17.     '<transition-group> for lists.',
    18.     this.$parent
    19.   )
    20. }

    先从默认插槽中获取 <transition> 包裹的子节点，并且判断了子节点的长度，如果长度为 0，则直接返回，否则判断长度如果大于 1，也会在开发环境报警告，因为 <transition> 组件是只能包裹一个子节点的。

    • 处理 model
    1. const mode: string = this.mode
    3. // warn invalid mode
    4. if (process.env.NODE_ENV !== 'production' &&
    5.   mode && mode !== 'in-out' && mode !== 'out-in'
    6. ) {
    7.   warn(
    8.     'invalid <transition> mode: ' + mode,
    9.     this.$parent
    10.   )
    11. }

    过渡组件的对 mode 的支持只有 2 种，in-out 或者是 out-in。

    • 获取 rawChild & child
    1. const rawChild: VNode = children[0]
    3. // if this is a component root node and the component's
    4. // parent container node also has transition, skip.
    5. if (hasParentTransition(this.$vnode)) {
    6.   return rawChild
    7. }
    9. // apply transition data to child
    10. // use getRealChild() to ignore abstract components e.g. keep-alive
    11. const child: ?VNode = getRealChild(rawChild)
    12. /* istanbul ignore if */
    13. if (!child) {
    14.   return rawChild
    15. }

    rawChild 就是第一个子节点 vnode，接着判断当前 <transition> 如果是组件根节点并且外面包裹该组件的容器也是 <transition> 的时候要跳过。来看一下 hasParentTransition 的实现：

    1. function hasParentTransition (vnode: VNode): ?boolean {
    2.   while ((vnode = vnode.parent)) {
    3.     if (vnode.data.transition) {
    4.       return true
    5.     }
    6.   }
    7. }

    因为传入的是 this.$vnode，也就是 <transition> 组件的 占位 vnode，只有当它同时作为根 vnode，也就是 vm._vnode 的时候，它的 parent 才不会为空，并且判断 parent 也是 <transition> 组件，才返回 true，vnode.data.transition 我们稍后会介绍。

    getRealChild 的目的是获取组件的非抽象子节点，因为 <transition> 很可能会包裹一个 keep-alive，它的实现如下：

    1. // in case the child is also an abstract component, e.g. <keep-alive>
    2. // we want to recursively retrieve the real component to be rendered
    3. function getRealChild (vnode: ?VNode): ?VNode {
    4.   const compOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    5.   if (compOptions && compOptions.Ctor.options.abstract) {
    6.     return getRealChild(getFirstComponentChild(compOptions.children))
    7.   } else {
    8.     return vnode
    9.   }
    10. }

    会递归找到第一个非抽象组件的 vnode 并返回，在我们这个 case 下，rawChild === child。

    • 处理 id & data
    1. // ensure a key that is unique to the vnode type and to this transition
    2. // component instance. This key will be used to remove pending leaving nodes
    3. // during entering.
    4. const id: string = `__transition-${this._uid}-`
    5. child.key = child.key == null
    6.   ? child.isComment
    7.     ? id + 'comment'
    8.     : id + child.tag
    9.   : isPrimitive(child.key)
    10.     ? (String(child.key).indexOf(id) === 0 ? child.key : id + child.key)
    11.     : child.key
    13. const data: Object = (child.data || (child.data = {})).transition = extractTransitionData(this)
    14. const oldRawChild: VNode = this._vnode
    15. const oldChild: VNode = getRealChild(oldRawChild)
    17. // mark v-show
    18. // so that the transition module can hand over the control to the directive
    19. if (child.data.directives && child.data.directives.some(d => d.name === 'show')) {
    20.   child.data.show = true
    21. }

    先根据 key 等一系列条件获取 id，接着从当前通过 extractTransitionData 组件实例上提取出过渡所需要的数据：

    1. export function extractTransitionData (comp: Component): Object {
    2.   const data = {}
    3.   const options: ComponentOptions = comp.$options
    4.   // props
    5.   for (const key in options.propsData) {
    6.     data[key] = comp[key]
    7.   }
    8.   // events.
    9.   // extract listeners and pass them directly to the transition methods
    10.   const listeners: ?Object = options._parentListeners
    11.   for (const key in listeners) {
    12.     data[camelize(key)] = listeners[key]
    13.   }
    14.   return data
    15. }

    首先是遍历 props 赋值到 data 中，接着是遍历所有父组件的事件也把事件回调赋值到 data 中。

    这样 child.data.transition 中就包含了过渡所需的一些数据，这些稍后都会用到，对于 child 如果使用了 v-show 指令，也会把 child.data.show 设置为 true，在我们的例子中，得到的 child.data 如下：

    1. {
    2.   transition: {
    3.     appear: true,
    4.     name: 'fade'
    5.   }
    6. }

    至于 oldRawChild 和 oldChild 是与后面的判断逻辑相关，这些我们这里先不介绍。

    transition module

    刚刚我们介绍完 <transition> 组件的实现，它的 render 阶段只获取了一些数据，并且返回了渲染的 vnode，并没有任何和动画相关，而动画相关的逻辑全部在 src/platforms/web/modules/transition.js 中：

    1. function _enter (_: any, vnode: VNodeWithData) {
    2.   if (vnode.data.show !== true) {
    3.     enter(vnode)
    4.   }
    5. }
    7. export default inBrowser ? {
    8.   create: _enter,
    9.   activate: _enter,
    10.   remove (vnode: VNode, rm: Function) {
    11.     /* istanbul ignore else */
    12.     if (vnode.data.show !== true) {
    13.       leave(vnode, rm)
    14.     } else {
    15.       rm()
    16.     }
    17.   }
    18. } : {}

    在之前介绍事件实现的章节中我们提到过在 vnode patch 的过程中，会执行很多钩子函数，那么对于过渡的实现，它只接收了 create 和 activate 2 个钩子函数，我们知道 create 钩子函数只有当节点的创建过程才会执行，而 remove 会在节点销毁的时候执行，这也就印证了 <transition> 必须要满足 v-if 、动态组件、组件根节点条件之一了，对于 v-show 在它的指令的钩子函数中也会执行相关逻辑，这块儿先不介绍。

    过渡动画提供了 2 个时机，一个是 create 和 activate 的时候提供了 entering 进入动画，一个是 remove 的时候提供了 leaving 离开动画，那么接下来我们就来分别去分析这两个过程。

    entering

    整个 entering 过程的实现是 enter 函数：

    1. export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
    2.   const el: any = vnode.elm
    4.   // call leave callback now
    5.   if (isDef(el._leaveCb)) {
    6.     el._leaveCb.cancelled = true
    7.     el._leaveCb()
    8.   }
    10.   const data = resolveTransition(vnode.data.transition)
    11.   if (isUndef(data)) {
    12.     return
    13.   }
    15.   /* istanbul ignore if */
    16.   if (isDef(el._enterCb) || el.nodeType !== 1) {
    17.     return
    18.   }
    20.   const {
    21.     css,
    22.     type,
    23.     enterClass,
    24.     enterToClass,
    25.     enterActiveClass,
    26.     appearClass,
    27.     appearToClass,
    28.     appearActiveClass,
    29.     beforeEnter,
    30.     enter,
    31.     afterEnter,
    32.     enterCancelled,
    33.     beforeAppear,
    34.     appear,
    35.     afterAppear,
    36.     appearCancelled,
    37.     duration
    38.   } = data
    40.   // activeInstance will always be the <transition> component managing this
    41.   // transition. One edge case to check is when the <transition> is placed
    42.   // as the root node of a child component. In that case we need to check
    43.   // <transition>'s parent for appear check.
    44.   let context = activeInstance
    45.   let transitionNode = activeInstance.$vnode
    46.   while (transitionNode && transitionNode.parent) {
    47.     transitionNode = transitionNode.parent
    48.     context = transitionNode.context
    49.   }
    51.   const isAppear = !context._isMounted || !vnode.isRootInsert
    53.   if (isAppear && !appear && appear !== '') {
    54.     return
    55.   }
    57.   const startClass = isAppear && appearClass
    58.     ? appearClass
    59.     : enterClass
    60.   const activeClass = isAppear && appearActiveClass
    61.     ? appearActiveClass
    62.     : enterActiveClass
    63.   const toClass = isAppear && appearToClass
    64.     ? appearToClass
    65.     : enterToClass
    67.   const beforeEnterHook = isAppear
    68.     ? (beforeAppear || beforeEnter)
    69.     : beforeEnter
    70.   const enterHook = isAppear
    71.     ? (typeof appear === 'function' ? appear : enter)
    72.     : enter
    73.   const afterEnterHook = isAppear
    74.     ? (afterAppear || afterEnter)
    75.     : afterEnter
    76.   const enterCancelledHook = isAppear
    77.     ? (appearCancelled || enterCancelled)
    78.     : enterCancelled
    80.   const explicitEnterDuration: any = toNumber(
    81.     isObject(duration)
    82.       ? duration.enter
    83.       : duration
    84.   )
    86.   if (process.env.NODE_ENV !== 'production' && explicitEnterDuration != null) {
    87.     checkDuration(explicitEnterDuration, 'enter', vnode)
    88.   }
    90.   const expectsCSS = css !== false && !isIE9
    91.   const userWantsControl = getHookArgumentsLength(enterHook)
    93.   const cb = el._enterCb = once(() => {
    94.     if (expectsCSS) {
    95.       removeTransitionClass(el, toClass)
    96.       removeTransitionClass(el, activeClass)
    97.     }
    98.     if (cb.cancelled) {
    99.       if (expectsCSS) {
    100.         removeTransitionClass(el, startClass)
    101.       }
    102.       enterCancelledHook && enterCancelledHook(el)
    103.     } else {
    104.       afterEnterHook && afterEnterHook(el)
    105.     }
    106.     el._enterCb = null
    107.   })
    109.   if (!vnode.data.show) {
    110.     // remove pending leave element on enter by injecting an insert hook
    111.     mergeVNodeHook(vnode, 'insert', () => {
    112.       const parent = el.parentNode
    113.       const pendingNode = parent && parent._pending && parent._pending[vnode.key]
    114.       if (pendingNode &&
    115.         pendingNode.tag === vnode.tag &&
    116.         pendingNode.elm._leaveCb
    117.       ) {
    118.         pendingNode.elm._leaveCb()
    119.       }
    120.       enterHook && enterHook(el, cb)
    121.     })
    122.   }
    124.   // start enter transition
    125.   beforeEnterHook && beforeEnterHook(el)
    126.   if (expectsCSS) {
    127.     addTransitionClass(el, startClass)
    128.     addTransitionClass(el, activeClass)
    129.     nextFrame(() => {
    130.       removeTransitionClass(el, startClass)
    131.       if (!cb.cancelled) {
    132.         addTransitionClass(el, toClass)
    133.         if (!userWantsControl) {
    134.           if (isValidDuration(explicitEnterDuration)) {
    135.             setTimeout(cb, explicitEnterDuration)
    136.           } else {
    137.             whenTransitionEnds(el, type, cb)
    138.           }
    139.         }
    140.       }
    141.     })
    142.   }
    144.   if (vnode.data.show) {
    145.     toggleDisplay && toggleDisplay()
    146.     enterHook && enterHook(el, cb)
    147.   }
    149.   if (!expectsCSS && !userWantsControl) {
    150.     cb()
    151.   }
    152. }

    enter 的代码很长，我们先分析其中的核心逻辑。

    • 解析过渡数据
    1. const data = resolveTransition(vnode.data.transition)
    2.   if (isUndef(data)) {
    3.     return
    4. }
    6. const {
    7.   css,
    8.   type,
    9.   enterClass,
    10.   enterToClass,
    11.   enterActiveClass,
    12.   appearClass,
    13.   appearToClass,
    14.   appearActiveClass,
    15.   beforeEnter,
    16.   enter,
    17.   afterEnter,
    18.   enterCancelled,
    19.   beforeAppear,
    20.   appear,
    21.   afterAppear,
    22.   appearCancelled,
    23.   duration
    24. } = data

    从 vnode.data.transition 中解析出过渡相关的一些数据，resolveTransition 的定义在 src/platforms/web/transition-util.js 中：

    1. export function resolveTransition (def?: string | Object): ?Object {
    2.   if (!def) {
    3.     return
    4.   }
    5.   /* istanbul ignore else */
    6.   if (typeof def === 'object') {
    7.     const res = {}
    8.     if (def.css !== false) {
    9.       extend(res, autoCssTransition(def.name || 'v'))
    10.     }
    11.     extend(res, def)
    12.     return res
    13.   } else if (typeof def === 'string') {
    14.     return autoCssTransition(def)
    15.   }
    16. }
    18. const autoCssTransition: (name: string) => Object = cached(name => {
    19.   return {
    20.     enterClass: `${name}-enter`,
    21.     enterToClass: `${name}-enter-to`,
    22.     enterActiveClass: `${name}-enter-active`,
    23.     leaveClass: `${name}-leave`,
    24.     leaveToClass: `${name}-leave-to`,
    25.     leaveActiveClass: `${name}-leave-active`
    26.   }
    27. })

    resolveTransition 会通过 autoCssTransition 处理 name 属性，生成一个用来描述各个阶段的 Class 名称的对象，扩展到 def 中并返回给 data，这样我们就可以从 data 中获取到过渡相关的所有数据。

    • 处理边界情况
    1. // activeInstance will always be the <transition> component managing this
    2. // transition. One edge case to check is when the <transition> is placed
    3. // as the root node of a child component. In that case we need to check
    4. // <transition>'s parent for appear check.
    5. let context = activeInstance
    6. let transitionNode = activeInstance.$vnode
    7. while (transitionNode && transitionNode.parent) {
    8.   transitionNode = transitionNode.parent
    9.   context = transitionNode.context
    10. }
    12. const isAppear = !context._isMounted || !vnode.isRootInsert
    14. if (isAppear && !appear && appear !== '') {
    15.   return
    16. }

    这是为了处理当 <transition> 作为子组件的根节点，那么我们需要检查它的父组件作为 appear 的检查。isAppear 表示当前上下文实例还没有 mounted，第一次出现的时机。如果是第一次并且 <transition> 组件没有配置 appear 的话，直接返回。

    • 定义过渡类名、钩子函数和其它配置
    1. const startClass = isAppear && appearClass
    2.     ? appearClass
    3.     : enterClass
    4. const activeClass = isAppear && appearActiveClass
    5.   ? appearActiveClass
    6.   : enterActiveClass
    7. const toClass = isAppear && appearToClass
    8.   ? appearToClass
    9.   : enterToClass
    11. const beforeEnterHook = isAppear
    12.   ? (beforeAppear || beforeEnter)
    13.   : beforeEnter
    14. const enterHook = isAppear
    15.   ? (typeof appear === 'function' ? appear : enter)
    16.   : enter
    17. const afterEnterHook = isAppear
    18.   ? (afterAppear || afterEnter)
    19.   : afterEnter
    20. const enterCancelledHook = isAppear
    21.   ? (appearCancelled || enterCancelled)
    22.   : enterCancelled
    24. const explicitEnterDuration: any = toNumber(
    25.   isObject(duration)
    26.     ? duration.enter
    27.     : duration
    28. )
    30. if (process.env.NODE_ENV !== 'production' && explicitEnterDuration != null) {
    31.   checkDuration(explicitEnterDuration, 'enter', vnode)
    32. }
    34. const expectsCSS = css !== false && !isIE9
    35. const userWantsControl = getHookArgumentsLength(enterHook)
    37. const cb = el._enterCb = once(() => {
    38.   if (expectsCSS) {
    39.     removeTransitionClass(el, toClass)
    40.     removeTransitionClass(el, activeClass)
    41.   }
    42.   if (cb.cancelled) {
    43.     if (expectsCSS) {
    44.       removeTransitionClass(el, startClass)
    45.     }
    46.     enterCancelledHook && enterCancelledHook(el)
    47.   } else {
    48.     afterEnterHook && afterEnterHook(el)
    49.   }
    50.   el._enterCb = null
    51. })

    对于过渡类名方面，startClass 定义进入过渡的开始状态，在元素被插入时生效，在下一个帧移除；activeClass 定义过渡的状态，在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除；toClass 定义进入过渡的结束状态，在元素被插入一帧后生效 (与此同时 startClass 被删除)，在 <transition>/animation 完成之后移除。

    对于过渡钩子函数方面，beforeEnterHook 是过渡开始前执行的钩子函数，enterHook 是在元素插入后或者是 v-show 显示切换后执行的钩子函数。afterEnterHook 是在过渡动画执行完后的钩子函数。

    explicitEnterDuration 表示 enter 动画执行的时间。

    expectsCSS 表示过渡动画是受 CSS 的影响。

    cb 定义的是过渡完成执行的回调函数。

    • 合并 insert 钩子函数
    1. if (!vnode.data.show) {
    2.   // remove pending leave element on enter by injecting an insert hook
    3.   mergeVNodeHook(vnode, 'insert', () => {
    4.     const parent = el.parentNode
    5.     const pendingNode = parent && parent._pending && parent._pending[vnode.key]
    6.     if (pendingNode &&
    7.       pendingNode.tag === vnode.tag &&
    8.       pendingNode.elm._leaveCb
    9.     ) {
    10.       pendingNode.elm._leaveCb()
    11.     }
    12.     enterHook && enterHook(el, cb)
    13.   })
    14. }

    mergeVNodeHook 的定义在 src/core/vdom/helpers/merge-hook.js 中：

    1. export function mergeVNodeHook (def: Object, hookKey: string, hook: Function) {
    2.   if (def instanceof VNode) {
    3.     def = def.data.hook || (def.data.hook = {})
    4.   }
    5.   let invoker
    6.   const oldHook = def[hookKey]
    8.   function wrappedHook () {
    9.     hook.apply(this, arguments)
    10.     // important: remove merged hook to ensure it's called only once
    11.     // and prevent memory leak
    12.     remove(invoker.fns, wrappedHook)
    13.   }
    15.   if (isUndef(oldHook)) {
    16.     // no existing hook
    17.     invoker = createFnInvoker([wrappedHook])
    18.   } else {
    19.     /* istanbul ignore if */
    20.     if (isDef(oldHook.fns) && isTrue(oldHook.merged)) {
    21.       // already a merged invoker
    22.       invoker = oldHook
    23.       invoker.fns.push(wrappedHook)
    24.     } else {
    25.       // existing plain hook
    26.       invoker = createFnInvoker([oldHook, wrappedHook])
    27.     }
    28.   }
    30.   invoker.merged = true
    31.   def[hookKey] = invoker
    32. }

    mergeVNodeHook 的逻辑很简单，就是把 hook 函数合并到 def.data.hook[hookey] 中，生成新的 invoker，createFnInvoker 方法我们在分析事件章节的时候已经介绍过了。

    我们之前知道组件的 vnode 原本定义了 init、prepatch、insert、destroy 四个钩子函数，而 mergeVNodeHook 函数就是把一些新的钩子函数合并进来，例如在 <transition> 过程中合并的 insert 钩子函数，就会合并到组件 vnode 的 insert 钩子函数中，这样当组件插入后，就会执行我们定义的 enterHook 了。

    • 开始执行过渡动画
    1. // start enter transition
    2. beforeEnterHook && beforeEnterHook(el)
    3. if (expectsCSS) {
    4.   addTransitionClass(el, startClass)
    5.   addTransitionClass(el, activeClass)
    6.   nextFrame(() => {
    7.     removeTransitionClass(el, startClass)
    8.     if (!cb.cancelled) {
    9.       addTransitionClass(el, toClass)
    10.       if (!userWantsControl) {
    11.         if (isValidDuration(explicitEnterDuration)) {
    12.           setTimeout(cb, explicitEnterDuration)
    13.         } else {
    14.           whenTransitionEnds(el, type, cb)
    15.         }
    16.       }
    17.     }
    18.   })
    19. }

    首先执行 beforeEnterHook 钩子函数，把当前元素的 DOM 节点 el 传入，然后判断 expectsCSS，如果为 true 则表明希望用 CSS 来控制动画，那么会执行 addTransitionClass(el, startClass) 和 addTransitionClass(el, activeClass)，它的定义在 src/platforms/runtime/transition-util.js 中：

    1. export function addTransitionClass (el: any, cls: string) {
    2.   const transitionClasses = el._transitionClasses || (el._transitionClasses = [])
    3.   if (transitionClasses.indexOf(cls) < 0) {
    4.     transitionClasses.push(cls)
    5.     addClass(el, cls)
    6.   }
    7. }

    其实非常简单，就是给当前 DOM 元素 el 添加样式 cls，所以这里添加了 startClass 和 activeClass，在我们的例子中就是给 p 标签添加了 fade-enter 和 fade-enter-active 2 个样式。

    接下来执行了 nextFrame：

    1. const raf = inBrowser
    2.   ? window.requestAnimationFrame
    3.     ? window.requestAnimationFrame.bind(window)
    4.     : setTimeout
    5.   : fn => fn()
    7. export function nextFrame (fn: Function) {
    8.   raf(() => {
    9.     raf(fn)
    10.   })
    11. }

    它就是一个简单的 requestAnimationFrame 的实现，它的参数 fn 会在下一帧执行，因此下一帧执行了 removeTransitionClass(el, startClass)：

    1. export function removeTransitionClass (el: any, cls: string) {
    2.   if (el._transitionClasses) {
    3.     remove(el._transitionClasses, cls)
    4.   }
    5.   removeClass(el, cls)
    6. }

    把 startClass 移除，在我们的等例子中就是移除 fade-enter 样式。然后判断此时过渡没有被取消，则执行 addTransitionClass(el, toClass) 添加 toClass，在我们的例子中就是添加了 fade-enter-to。然后判断 !userWantsControl，也就是用户不通过 enterHook 钩子函数控制动画，这时候如果用户指定了 explicitEnterDuration，则延时这个时间执行 cb，否则通过 whenTransitionEnds(el, type, cb) 决定执行 cb 的时机：

    1. export function whenTransitionEnds (
    2.   el: Element,
    3.   expectedType: ?string,
    4.   cb: Function
    5. ) {
    6.   const { type, timeout, propCount } = getTransitionInfo(el, expectedType)
    7.   if (!type) return cb()
    8.   const event: string = type === <transition> ? transitionEndEvent : animationEndEvent
    9.   let ended = 0
    10.   const end = () => {
    11.     el.removeEventListener(event, onEnd)
    12.     cb()
    13.   }
    14.   const onEnd = e => {
    15.     if (e.target === el) {
    16.       if (++ended >= propCount) {
    17.         end()
    18.       }
    19.     }
    20.   }
    21.   setTimeout(() => {
    22.     if (ended < propCount) {
    23.       end()
    24.     }
    25.   }, timeout + 1)
    26.   el.addEventListener(event, onEnd)
    27. }

    whenTransitionEnds 的逻辑具体不深讲了，本质上就利用了过渡动画的结束事件来决定 cb 函数的执行。

    最后再回到 cb 函数：

    1. const cb = el._enterCb = once(() => {
    2.   if (expectsCSS) {
    3.     removeTransitionClass(el, toClass)
    4.     removeTransitionClass(el, activeClass)
    5.   }
    6.   if (cb.cancelled) {
    7.     if (expectsCSS) {
    8.       removeTransitionClass(el, startClass)
    9.     }
    10.     enterCancelledHook && enterCancelledHook(el)
    11.   } else {
    12.     afterEnterHook && afterEnterHook(el)
    13.   }
    14.   el._enterCb = null
    15. })

    其实很简单，执行了 removeTransitionClass(el, toClass) 和 removeTransitionClass(el, activeClass) 把 toClass 和 activeClass 移除，然后判断如果有没有取消，如果取消则移除 startClass 并执行 enterCancelledHook，否则执行 afterEnterHook(el)。

    那么到这里，entering 的过程就介绍完了。

    leaving

    与 entering 相对的就是 leaving 阶段了，entering 主要发生在组件插入后，而 leaving 主要发生在组件销毁前。

    1. export function leave (vnode: VNodeWithData, rm: Function) {
    2.   const el: any = vnode.elm
    4.   // call enter callback now
    5.   if (isDef(el._enterCb)) {
    6.     el._enterCb.cancelled = true
    7.     el._enterCb()
    8.   }
    10.   const data = resolveTransition(vnode.data.transition)
    11.   if (isUndef(data) || el.nodeType !== 1) {
    12.     return rm()
    13.   }
    15.   /* istanbul ignore if */
    16.   if (isDef(el._leaveCb)) {
    17.     return
    18.   }
    20.   const {
    21.     css,
    22.     type,
    23.     leaveClass,
    24.     leaveToClass,
    25.     leaveActiveClass,
    26.     beforeLeave,
    27.     leave,
    28.     afterLeave,
    29.     leaveCancelled,
    30.     delayLeave,
    31.     duration
    32.   } = data
    34.   const expectsCSS = css !== false && !isIE9
    35.   const userWantsControl = getHookArgumentsLength(leave)
    37.   const explicitLeaveDuration: any = toNumber(
    38.     isObject(duration)
    39.       ? duration.leave
    40.       : duration
    41.   )
    43.   if (process.env.NODE_ENV !== 'production' && isDef(explicitLeaveDuration)) {
    44.     checkDuration(explicitLeaveDuration, 'leave', vnode)
    45.   }
    47.   const cb = el._leaveCb = once(() => {
    48.     if (el.parentNode && el.parentNode._pending) {
    49.       el.parentNode._pending[vnode.key] = null
    50.     }
    51.     if (expectsCSS) {
    52.       removeTransitionClass(el, leaveToClass)
    53.       removeTransitionClass(el, leaveActiveClass)
    54.     }
    55.     if (cb.cancelled) {
    56.       if (expectsCSS) {
    57.         removeTransitionClass(el, leaveClass)
    58.       }
    59.       leaveCancelled && leaveCancelled(el)
    60.     } else {
    61.       rm()
    62.       afterLeave && afterLeave(el)
    63.     }
    64.     el._leaveCb = null
    65.   })
    67.   if (delayLeave) {
    68.     delayLeave(performLeave)
    69.   } else {
    70.     performLeave()
    71.   }
    73.   function performLeave () {
    74.     // the delayed leave may have already been cancelled
    75.     if (cb.cancelled) {
    76.       return
    77.     }
    78.     // record leaving element
    79.     if (!vnode.data.show) {
    80.       (el.parentNode._pending || (el.parentNode._pending = {}))[(vnode.key: any)] = vnode
    81.     }
    82.     beforeLeave && beforeLeave(el)
    83.     if (expectsCSS) {
    84.       addTransitionClass(el, leaveClass)
    85.       addTransitionClass(el, leaveActiveClass)
    86.       nextFrame(() => {
    87.         removeTransitionClass(el, leaveClass)
    88.         if (!cb.cancelled) {
    89.           addTransitionClass(el, leaveToClass)
    90.           if (!userWantsControl) {
    91.             if (isValidDuration(explicitLeaveDuration)) {
    92.               setTimeout(cb, explicitLeaveDuration)
    93.             } else {
    94.               whenTransitionEnds(el, type, cb)
    95.             }
    96.           }
    97.         }
    98.       })
    99.     }
    100.     leave && leave(el, cb)
    101.     if (!expectsCSS && !userWantsControl) {
    102.       cb()
    103.     }
    104.   }
    105. }

    纵观 leave 的实现，和 enter 的实现几乎是一个镜像过程，不同的是从 data 中解析出来的是 leave 相关的样式类名和钩子函数。还有一点不同是可以配置 delayLeave，它是一个函数，可以延时执行 leave 的相关过渡动画，在 leave 动画执行完后，它会执行 rm 函数把节点从 DOM 中真正做移除。

    总结

    那么到此为止基本的 <transition> 过渡的实现分析完毕了，总结起来，Vue 的过渡实现分为以下几个步骤：

    • 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

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

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

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

    原文: https://ustbhuangyi.github.io/vue-analysis/extend/tansition.html