组件只能针对单一元素实现过渡效果
前端开发经常会遇到列表的需求，对列表元素进行添加和删除，有时候也希望有过渡效果，Vue.js 提供了 组件，很好地帮助实现列表的过渡效果

例子

  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 按钮时，会随机删除掉一个数。会发现在数添加删除的过程中在列表中会有过渡动画，这就是 组件配合定义的 CSS 产生的效果
组件的实现，它的定义在 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.       const restoreActiveInstance = setActiveInstance(this)
  15.       // force removing pass
  16.       this.__patch__(
  17.         this._vnode,
  18.         this.kept,
  19.         false, // hydrating
  20.         true // removeOnly (!important, avoids unnecessary moves) 设置为true，这样在updateChildren阶段是不会移动vnode节点的
  21.       )
  22.       this._vnode = this.kept
  23.       restoreActiveInstance()
  24.       update.call(this, vnode, hydrating)
  25.     }
  26.   },
  27.     // <transition-group> 组件也是由 render 函数渲染生成 vnode
  28.   render (h: Function) {
  29.     // 1.定义一些变量
  30.     // 会渲染成一个真实元素，默认tag是span
  31.     const tag: string = this.tag || this.$vnode.data.tag || 'span'
  32.     const map: Object = Object.create(null)
  33.     // 储存上一次的子节点
  34.     const prevChildren: Array<VNode> = this.prevChildren = this.children
  35.     // <transition-group>包裹的原始子节点
  36.     const rawChildren: Array<VNode> = this.$slots.default || []
  37.     // 储存当前的子节点
  38.     const children: Array<VNode> = this.children = []
  39.     // 从<transition-group>组件上提取出来的一些渲染数据
  40.     const transitionData: Object = extractTransitionData(this)
  42.     // 2.遍历rawChildren，初始化children
  43.     for (let i = 0; i < rawChildren.length; i++) {
  44.       // 拿到每个vnode
  45.       const c: VNode = rawChildren[i]
  46.       if (c.tag) {
  47.         // 判断是否设置了key，这个是<transition-group>对列表元素的要求
  48.         if (c.key != null && String(c.key).indexOf('__vlist') !== 0) {
  49.           // 把vnode添加到children
  50.           children.push(c)
  51.           map[c.key] = c
  52.           // 把刚刚提取的过渡数据transitionData添加到vnode.data.transition中
  53.           ;(c.data || (c.data = {})).transition = transitionData
  54.         } else if (process.env.NODE_ENV !== 'production') {
  55.           const opts: ?VNodeComponentOptions = c.componentOptions
  56.           const name: string = opts ? (opts.Ctor.options.name || opts.tag || '') : c.tag
  57.           warn(`<transition-group> children must be keyed: <${name}>`)
  58.         }
  59.       }
  60.     }
  62.     // 3.处理prevChildren
  63.     if (prevChildren) {
  64.       const kept: Array<VNode> = []
  65.       const removed: Array<VNode> = []
  66.       // 遍历
  67.       for (let i = 0; i < prevChildren.length; i++) {
  68.         // 获取到每个vnode
  69.         const c: VNode = prevChildren[i]
  70.         // 把transitionData赋值到vnode.data.transition - 是为了当它在enter和leave的钩子函数中有过渡动画
  71.         c.data.transition = transitionData
  72.         // 调用原生DOM方法getBoundingClientRect获取到原生DOM的位置信息，记录到vnode.data.pos
  73.         c.data.pos = c.elm.getBoundingClientRect()
  74.         // 判断vnode.key是否在map中
  75.         if (map[c.key]) {
  76.           // 在则放入kept中
  77.           kept.push(c)
  78.         } else {
  79.           // 否则表示该节点已被删除，放入removed中
  80.           removed.push(c)
  81.         }
  82.       }
  83.       // 执行h(tag, null, kept)渲染后放入this,kept中
  84.       this.kept = h(tag, null, kept)
  85.       // 把removed用this.removed保存
  86.       this.removed = removed
  87.     }
  88.         // h(tag, null, children)生成渲染vnode
  89.     return h(tag, null, children)
  90.   },
  92.   updated () {
  93.     // 1.判断子元素是否定义move相关样式
  94.     const children: Array<VNode> = this.prevChildren
  95.     const moveClass: string = this.moveClass || ((this.name || 'v') + '-move')
  96.     if (!children.length || !this.hasMove(children[0].elm, moveClass)) {
  97.       return
  98.     }
  100.         // 2.子节点预处理
  101.     // 堆children做了三轮循环
  102.     // we divide the work into three loops to avoid mixing DOM reads and writes
  103.     // in each iteration - which helps prevent layout thrashing.
  104.     children.forEach(callPendingCbs)
  105.     children.forEach(recordPosition)
  106.     children.forEach(applyTranslation)
  108.     // 3.遍历子元素实现move过渡
  109.     // force reflow to put everything in position
  110.     // assign to this to avoid being removed in tree-shaking
  111.     // $flow-disable-line
  112.     // 强制触发浏览器重绘
  113.     this._reflow = document.body.offsetHeight
  114.         // 对children遍历
  115.     children.forEach((c: VNode) => {
  116.       if (c.data.moved) {
  117.         const el: any = c.elm
  118.         const s: any = el.style
  119.         // 先给子节点添加moveClass
  120.         addTransitionClass(el, moveClass)
  121.         // 把子节点的style.transform设置为空 - 例子中moveClass定义了transition: all 1s;缓动，由于前面把这些节点偏移到之前的旧位置，所以它就会从旧位置按照 1s 的缓动时间过渡偏移到它的当前目标位置，这样就实现了 move 的过渡动画
  122.         s.transform = s.WebkitTransform = s.transitionDuration = ''
  123.         // 监听transitionEndEvent过渡结束的事件，做一些清理操作
  124.         el.addEventListener(transitionEndEvent, el._moveCb = function cb (e) {
  125.           if (e && e.target !== el) {
  126.             return
  127.           }
  128.           if (!e || /transform$/.test(e.propertyName)) {
  129.             el.removeEventListener(transitionEndEvent, cb)
  130.             el._moveCb = null
  131.             removeTransitionClass(el, moveClass)
  132.           }
  133.         })
  134.       }
  135.     })
  136.   },
  138.   methods: {
  139.     hasMove (el: any, moveClass: string): boolean {
  140.       /* istanbul ignore if */
  141.       if (!hasTransition) {
  142.         return false
  143.       }
  144.       /* istanbul ignore if */
  145.       if (this._hasMove) {
  146.         return this._hasMove
  147.       }
  148.       // Detect whether an element with the move class applied has
  149.       // CSS transitions. Since the element may be inside an entering
  150.       // transition at this very moment, we make a clone of it and remove
  151.       // all other transition classes applied to ensure only the move class
  152.       // is applied.
  153.       const clone: HTMLElement = el.cloneNode()
  154.       if (el._transitionClasses) {
  155.         el._transitionClasses.forEach((cls: string) => { removeClass(clone, cls) })
  156.       }
  157.       addClass(clone, moveClass)
  158.       clone.style.display = 'none'
  159.       this.$el.appendChild(clone)
  160.       const info: Object = getTransitionInfo(clone)
  161.       this.$el.removeChild(clone)
  162.       return (this._hasMove = info.hasTransform)
  163.     }
  164.   }
  165. }

render 函数

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

move过渡实现

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

  1. hasMove (el: any, moveClass: string): boolean {
  2.   /* istanbul ignore if */
  3.   if (!hasTransition) {
  4.     return false
  5.   }
  6.   /* istanbul ignore if */
  7.   if (this._hasMove) {
  8.     return this._hasMove
  9.   }
  10.   // Detect whether an element with the move class applied has
  11.   // CSS transitions. Since the element may be inside an entering
  12.   // transition at this very moment, we make a clone of it and remove
  13.   // all other transition classes applied to ensure only the move class
  14.   // is applied.
  15.   // 克隆一个DOM节点
  16.   const clone: HTMLElement = el.cloneNode()
  17.   // 移除它的所有其它的过渡Class
  18.   if (el._transitionClasses) {
  19.     el._transitionClasses.forEach((cls: string) => { removeClass(clone, cls) })
  20.   }
  21.   // 添加moveClass样式
  22.   addClass(clone, moveClass)
  23.   // 设置display为none
  24.   clone.style.display = 'none'
  25.   // 添加到根节点上
  26.   this.$el.appendChild(clone)
  27.   // 通过getTransitionInfo获取它的一些缓动相关的信息
  28.   const info: Object = getTransitionInfo(clone)
  29.   // 从组件根节点上删除这个克隆节点
  30.   this.$el.removeChild(clone)
  31.   // 通过判断info.hasTransform来判断hasMove
  32.   return (this._hasMove = info.hasTransform)
  33. }

callPendingCbs、recordPosition 、applyTranslation 

  1. // 在前一个过渡动画没执行完又再次执行到该方法时会提前执行_moveCb和_enterCb
  2. function callPendingCbs (c: VNode) {
  3.   /* istanbul ignore if */
  4.   if (c.elm._moveCb) {
  5.     c.elm._moveCb()
  6.   }
  7.   /* istanbul ignore if */
  8.   if (c.elm._enterCb) {
  9.     c.elm._enterCb()
  10.   }
  11. }
  12. // 记录节点的新位置
  13. function recordPosition (c: VNode) {
  14.   c.data.newPos = c.elm.getBoundingClientRect()
  15. }
  16. // 先计算节点新位置和旧位置的差值 
  17. // 如果差值不为 0，则说明这些节点是需要移动的，所以记录 vnode.data.moved 为 true，并且通过设置 transform 把需要移动的节点的位置又偏移到之前的旧位置，目的是为了做 move 缓动做准备
  18. function applyTranslation (c: VNode) {
  19.   const oldPos = c.data.pos
  20.   const newPos = c.data.newPos
  21.   const dx = oldPos.left - newPos.left
  22.   const dy = oldPos.top - newPos.top
  23.   if (dx || dy) {
  24.     c.data.moved = true
  25.     const s = c.elm.style
  26.     s.transform = s.WebkitTransform = `translate(${dx}px,${dy}px)`
  27.     s.transitionDuration = '0s'
  28.   }
  29. }

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

组件的实现原理和 组件相比，实现了列表的过渡，以及它会渲染成真实的元素。当修改列表的数据的时候，如果是添加或者删除数据，则会触发相应元素本身的过渡动画，这点和 组件实现效果一样，除此之外 还实现了 move 的过渡效果，让列表过渡动画更加丰富