• transition-group
    • render 函数
    • move 过渡实现
    • 总结

    transition-group

    前一节我们介绍了 <transiiton> 组件的实现原理，它只能针对单一元素实现过渡效果。我们做前端开发经常会遇到列表的需求，我们对列表元素进行添加和删除，有时候也希望有过渡效果，Vue.js 提供了 <transition-group> 组件，很好地帮助我们实现了列表的过渡效果。那么接下来我们就来分析一下它的实现原理。

    为了更直观，我们也是通过一个示例来说明：

    1. let vm = new Vue({
    2.   el: '#app',
    3.   template: '<div id="list-complete-demo" class="demo">' +
    4.   '<button v-on:click="add">Add</button>' +
    5.   '<button v-on:click="remove">Remove</button>' +
    6.   '<transition-group name="list-complete" tag="p">' +
    7.   '<span v-for="item in items" v-bind:key="item" class="list-complete-item">' +
    8.   '{{ item }}' +
    9.   '</span>' +
    10.   '</transition-group>' +
    11.   '</div>',
    12.   data: {
    13.     items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    14.     nextNum: 10
    15.   },
    16.   methods: {
    17.     randomIndex: function () {
    18.       return Math.floor(Math.random() * this.items.length)
    19.     },
    20.     add: function () {
    21.       this.items.splice(this.randomIndex(), 0, this.nextNum++)
    22.     },
    23.     remove: function () {
    24.       this.items.splice(this.randomIndex(), 1)
    25.     }
    26.   }
    27. })
    1.  .list-complete-item {
    2.   display: inline-block;
    3.   margin-right: 10px;
    4. }
    5. .list-complete-move {
    6.   transition: all 1s;
    7. }
    8. .list-complete-enter, .list-complete-leave-to {
    9.   opacity: 0;
    10.   transform: translateY(30px);
    11. }
    12. .list-complete-enter-active {
    13.   transition: all 1s;
    14. }
    15. .list-complete-leave-active {
    16.   transition: all 1s;
    17.   position: absolute;
    18. }

    这个示例初始会展现 1-9 十个数字，当我们点击 Add 按钮时，会生成 nextNum 并随机在当前数列表中插入；当我们点击 Remove 按钮时，会随机删除掉一个数。我们会发现在数添加删除的过程中在列表中会有过渡动画，这就是 <transition-group> 组件配合我们定义的 CSS 产生的效果。

    我们首先还是来分析 <transtion-group> 组件的实现，它的定义在 src/platforms/web/runtime/components/transitions.js 中：

    1. const props = extend({
    2.   tag: String,
    3.   moveClass: String
    4. }, transitionProps)
    6. delete props.mode
    8. export default {
    9.   props,
    11.   beforeMount () {
    12.     const update = this._update
    13.     this._update = (vnode, hydrating) => {
    14.       // force removing pass
    15.       this.__patch__(
    16.         this._vnode,
    17.         this.kept,
    18.         false, // hydrating
    19.         true // removeOnly (!important, avoids unnecessary moves)
    20.       )
    21.       this._vnode = this.kept
    22.       update.call(this, vnode, hydrating)
    23.     }
    24.   },
    26.   render (h: Function) {
    27.     const tag: string = this.tag || this.$vnode.data.tag || 'span'
    28.     const map: Object = Object.create(null)
    29.     const prevChildren: Array<VNode> = this.prevChildren = this.children
    30.     const rawChildren: Array<VNode> = this.$slots.default || []
    31.     const children: Array<VNode> = this.children = []
    32.     const transitionData: Object = extractTransitionData(this)
    34.     for (let i = 0; i < rawChildren.length; i++) {
    35.       const c: VNode = rawChildren[i]
    36.       if (c.tag) {
    37.         if (c.key != null && String(c.key).indexOf('__vlist') !== 0) {
    38.           children.push(c)
    39.           map[c.key] = c
    40.           ;(c.data || (c.data = {})).transition = transitionData
    41.         } else if (process.env.NODE_ENV !== 'production') {
    42.           const opts: ?VNodeComponentOptions = c.componentOptions
    43.           const name: string = opts ? (opts.Ctor.options.name || opts.tag || '') : c.tag
    44.           warn(`<transition-group> children must be keyed: <${name}>`)
    45.         }
    46.       }
    47.     }
    49.     if (prevChildren) {
    50.       const kept: Array<VNode> = []
    51.       const removed: Array<VNode> = []
    52.       for (let i = 0; i < prevChildren.length; i++) {
    53.         const c: VNode = prevChildren[i]
    54.         c.data.transition = transitionData
    55.         c.data.pos = c.elm.getBoundingClientRect()
    56.         if (map[c.key]) {
    57.           kept.push(c)
    58.         } else {
    59.           removed.push(c)
    60.         }
    61.       }
    62.       this.kept = h(tag, null, kept)
    63.       this.removed = removed
    64.     }
    66.     return h(tag, null, children)
    67.   },
    69.   updated () {
    70.     const children: Array<VNode> = this.prevChildren
    71.     const moveClass: string = this.moveClass || ((this.name || 'v') + '-move')
    72.     if (!children.length || !this.hasMove(children[0].elm, moveClass)) {
    73.       return
    74.     }
    76.     // we divide the work into three loops to avoid mixing DOM reads and writes
    77.     // in each iteration - which helps prevent layout thrashing.
    78.     children.forEach(callPendingCbs)
    79.     children.forEach(recordPosition)
    80.     children.forEach(applyTranslation)
    82.     // force reflow to put everything in position
    83.     // assign to this to avoid being removed in tree-shaking
    84.     // $flow-disable-line
    85.     this._reflow = document.body.offsetHeight
    87.     children.forEach((c: VNode) => {
    88.       if (c.data.moved) {
    89.         var el: any = c.elm
    90.         var s: any = el.style
    91.         addTransitionClass(el, moveClass)
    92.         s.transform = s.WebkitTransform = s.transitionDuration = ''
    93.         el.addEventListener(transitionEndEvent, el._moveCb = function cb (e) {
    94.           if (!e || /transform$/.test(e.propertyName)) {
    95.             el.removeEventListener(transitionEndEvent, cb)
    96.             el._moveCb = null
    97.             removeTransitionClass(el, moveClass)
    98.           }
    99.         })
    100.       }
    101.     })
    102.   },
    104.   methods: {
    105.     hasMove (el: any, moveClass: string): boolean {
    106.       /* istanbul ignore if */
    107.       if (!hasTransition) {
    108.         return false
    109.       }
    110.       /* istanbul ignore if */
    111.       if (this._hasMove) {
    112.         return this._hasMove
    113.       }
    114.       // Detect whether an element with the move class applied has
    115.       // CSS transitions. Since the element may be inside an entering
    116.       // transition at this very moment, we make a clone of it and remove
    117.       // all other transition classes applied to ensure only the move class
    118.       // is applied.
    119.       const clone: HTMLElement = el.cloneNode()
    120.       if (el._transitionClasses) {
    121.         el._transitionClasses.forEach((cls: string) => { removeClass(clone, cls) })
    122.       }
    123.       addClass(clone, moveClass)
    124.       clone.style.display = 'none'
    125.       this.$el.appendChild(clone)
    126.       const info: Object = getTransitionInfo(clone)
    127.       this.$el.removeChild(clone)
    128.       return (this._hasMove = info.hasTransform)
    129.     }
    130.   }
    131. }

    render 函数

    <transition-group> 组件也是由 render 函数渲染生成 vnode，接下来我们先分析 render 的实现。

    • 定义一些变量
    1. const tag: string = this.tag || this.$vnode.data.tag || 'span'
    2. const map: Object = Object.create(null)
    3. const prevChildren: Array<VNode> = this.prevChildren = this.children
    4. const rawChildren: Array<VNode> = this.$slots.default || []
    5. const children: Array<VNode> = this.children = []
    6. const transitionData: Object = extractTransitionData(this)

    不同于 <transition> 组件，<transition-group> 组件非抽象组件，它会渲染成一个真实元素，默认 tag 是 span。 prevChildren 用来存储上一次的子节点；children 用来存储当前的子节点；rawChildren 表示 <transtition-group> 包裹的原始子节点；transtionData 是从 <transtition-group> 组件上提取出来的一些渲染数据，这点和 <transition> 组件的实现是一样的。

    • 遍历 rawChidren，初始化 children
    1. for (let i = 0; i < rawChildren.length; i++) {
    2.   const c: VNode = rawChildren[i]
    3.   if (c.tag) {
    4.     if (c.key != null && String(c.key).indexOf('__vlist') !== 0) {
    5.       children.push(c)
    6.       map[c.key] = c
    7.       ;(c.data || (c.data = {})).transition = transitionData
    8.     } else if (process.env.NODE_ENV !== 'production') {
    9.       const opts: ?VNodeComponentOptions = c.componentOptions
    10.       const name: string = opts ? (opts.Ctor.options.name || opts.tag || '') : c.tag
    11.       warn(`<transition-group> children must be keyed: <${name}>`)
    12.     }
    13.   }
    14. }

    其实就是对 rawChildren 遍历，拿到每个 vnode，然后会判断每个 vnode 是否设置了 key，这个是 <transition-group> 对列表元素的要求。然后把 vnode 添加到 children 中，然后把刚刚提取的过渡数据 transitionData 添加的 vnode.data.transition 中，这点很关键，只有这样才能实现列表中单个元素的过渡动画。

    • 处理 prevChildren
    1. if (prevChildren) {
    2.   const kept: Array<VNode> = []
    3.   const removed: Array<VNode> = []
    4.   for (let i = 0; i < prevChildren.length; i++) {
    5.     const c: VNode = prevChildren[i]
    6.     c.data.transition = transitionData
    7.     c.data.pos = c.elm.getBoundingClientRect()
    8.     if (map[c.key]) {
    9.       kept.push(c)
    10.     } else {
    11.       removed.push(c)
    12.     }
    13.   }
    14.   this.kept = h(tag, null, kept)
    15.   this.removed = removed
    16. }
    18. return h(tag, null, children)

    当有 prevChildren 的时候，我们会对它做遍历，获取到每个 vnode，然后把 transitionData 赋值到 vnode.data.transition，这个是为了当它在 enter 和 leave 的钩子函数中有过渡动画，我们在上节介绍 transition 的实现中说过。接着又调用了原生 DOM 的 getBoundingClientRect 方法获取到原生 DOM 的位置信息，记录到 vnode.data.pos 中，然后判断一下 vnode.key 是否在 map 中，如果在则放入 kept 中，否则表示该节点已被删除，放入 removed 中，然后通过执行 h(tag, null, kept) 渲染后放入 this.kept 中，把 removed 用 this.removed 保存。最后整个 render 函数通过 h(tag, null, children) 生成渲染 vnode。

    如果 transition-group 只实现了这个 render 函数，那么每次插入和删除的元素的缓动动画是可以实现的，在我们的例子中，当新增一个元素，它的插入的过渡动画是有的，但是剩余元素平移的过渡效果是出不来的，所以接下来我们来分析 <transition-group> 组件是如何实现剩余元素平移的过渡效果的。

    move 过渡实现

    其实我们在实现元素的插入和删除，无非就是操作数据，控制它们的添加和删除。比如我们新增数据的时候，会添加一条数据，除了重新执行 render 函数渲染新的节点外，还要触发 updated 钩子函数，接着我们就来分析 updated 钩子函数的实现。

    • 判断子元素是否定义 move 相关样式
    1. const children: Array<VNode> = this.prevChildren
    2. const moveClass: string = this.moveClass || ((this.name || 'v') + '-move')
    3. if (!children.length || !this.hasMove(children[0].elm, moveClass)) {
    4.   return
    5. }
    7. hasMove (el: any, moveClass: string): boolean {
    8.   /* istanbul ignore if */
    9.   if (!hasTransition) {
    10.     return false
    11.   }
    12.   /* istanbul ignore if */
    13.   if (this._hasMove) {
    14.     return this._hasMove
    15.   }
    16.   // Detect whether an element with the move class applied has
    17.   // CSS transitions. Since the element may be inside an entering
    18.   // transition at this very moment, we make a clone of it and remove
    19.   // all other transition classes applied to ensure only the move class
    20.   // is applied.
    21.   const clone: HTMLElement = el.cloneNode()
    22.   if (el._transitionClasses) {
    23.     el._transitionClasses.forEach((cls: string) => { removeClass(clone, cls) })
    24.   }
    25.   addClass(clone, moveClass)
    26.   clone.style.display = 'none'
    27.   this.$el.appendChild(clone)
    28.   const info: Object = getTransitionInfo(clone)
    29.   this.$el.removeChild(clone)
    30.   return (this._hasMove = info.hasTransform)
    31. }

    核心就是 hasMove 的判断，首先克隆一个 DOM 节点，然后为了避免影响，移除它的所有其他的过渡 Class；接着添加了 moveClass 样式，设置 display 为 none，添加到组件根节点上；接下来通过 getTransitionInfo 获取它的一些缓动相关的信息，这个函数在上一节我们也介绍过，然后从组件根节点上删除这个克隆节点，并通过判断 info.hasTransform 来判断 hasMove，在我们的例子中，该值为 true。

    • 子节点预处理
    1. children.forEach(callPendingCbs)
    2. children.forEach(recordPosition)
    3. children.forEach(applyTranslation)

    对 children 做了 3 轮循环，分别做了如下一些处理：

    1. function callPendingCbs (c: VNode) {
    2.   if (c.elm._moveCb) {
    3.     c.elm._moveCb()
    4.   }
    5.   if (c.elm._enterCb) {
    6.     c.elm._enterCb()
    7.   }
    8. }
    10. function recordPosition (c: VNode) {
    11.   c.data.newPos = c.elm.getBoundingClientRect()
    12. }
    14. function applyTranslation (c: VNode) {
    15.   const oldPos = c.data.pos
    16.   const newPos = c.data.newPos
    17.   const dx = oldPos.left - newPos.left
    18.   const dy = oldPos.top - newPos.top
    19.   if (dx || dy) {
    20.     c.data.moved = true
    21.     const s = c.elm.style
    22.     s.transform = s.WebkitTransform = `translate(${dx}px,${dy}px)`
    23.     s.transitionDuration = '0s'
    24.   }
    25. }

    callPendingCbs 方法是在前一个过渡动画没执行完又再次执行到该方法的时候，会提前执行 _moveCb 和 _enterCb。

    recordPosition 的作用是记录节点的新位置。

    applyTranslation 的作用是先计算节点新位置和旧位置的差值，如果差值不为 0，则说明这些节点是需要移动的，所以记录 vnode.data.moved 为 true，并且通过设置 transform 把需要移动的节点的位置又偏移到之前的旧位置，目的是为了做 move 缓动做准备。

    • 遍历子元素实现 move 过渡
    1. this._reflow = document.body.offsetHeight
    3. children.forEach((c: VNode) => {
    4.   if (c.data.moved) {
    5.     var el: any = c.elm
    6.     var s: any = el.style
    7.     addTransitionClass(el, moveClass)
    8.     s.transform = s.WebkitTransform = s.transitionDuration = ''
    9.     el.addEventListener(transitionEndEvent, el._moveCb = function cb (e) {
    10.       if (!e || /transform$/.test(e.propertyName)) {
    11.         el.removeEventListener(transitionEndEvent, cb)
    12.         el._moveCb = null
    13.         removeTransitionClass(el, moveClass)
    14.       }
    15.     })
    16.   }
    17. })

    首先通过 document.body.offsetHeight 强制触发浏览器重绘，接着再次对 children 遍历，先给子节点添加 moveClass，在我们的例子中，moveClass 定义了 transition: all 1s; 缓动；接着把子节点的 style.transform 设置为空，由于我们前面把这些节点偏移到之前的旧位置，所以它就会从旧位置按照 1s 的缓动时间过渡偏移到它的当前目标位置，这样就实现了 move 的过渡动画。并且接下来会监听 transitionEndEvent 过渡结束的事件，做一些清理的操作。

    另外，由于虚拟 DOM 的子元素更新算法是不稳定的，它不能保证被移除元素的相对位置，所以我们强制 <transition-group> 组件更新子节点通过 2 个步骤：第一步我们移除需要移除的 vnode，同时触发它们的 leaving 过渡；第二步我们需要把插入和移动的节点达到它们的最终态，同时还要保证移除的节点保留在应该的位置，而这个是通过 beforeMount 钩子函数来实现的：

    1. beforeMount () {
    2.   const update = this._update
    3.   this._update = (vnode, hydrating) => {
    4.     // force removing pass
    5.     this.__patch__(
    6.       this._vnode,
    7.       this.kept,
    8.       false, // hydrating
    9.       true // removeOnly (!important, avoids unnecessary moves)
    10.     )
    11.     this._vnode = this.kept
    12.     update.call(this, vnode, hydrating)
    13.   }
    14. }

    通过把 patch 方法的第四个参数 removeOnly 设置为 true，这样在 updateChildren 阶段，是不会移动 vnode 节点的。

    总结

    那么到此，<transtion-group> 组件的实现原理就介绍完毕了，它和 <transition> 组件相比，实现了列表的过渡，以及它会渲染成真实的元素。当我们去修改列表的数据的时候，如果是添加或者删除数据，则会触发相应元素本身的过渡动画，这点和 <transition> 组件实现效果一样，除此之外 <transtion-group> 还实现了 move 的过渡效果，让我们的列表过渡动画更加丰富。

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