enable transition again for fragment insert/removal

Author: yyx990803

src/api/dom.js

@@ -100,12 +100,11 @@ exports.$remove = function (cb, withTransition) {
     if (cb) cb()
   }
   if (this._isFragment) {
-    var frag = this._fragment
-    _.mapNodeRange(this._fragmentStart, this._fragmentEnd, function (node) {
-      // store nodes in the fragment
-      frag.appendChild(node)
-    })
-    realCb()
+    _.removeNodeRange(
+      this._fragmentStart,
+      this._fragmentEnd,
+      this, this._fragment, realCb
+    )
   } else {
     var op = withTransition === false
       ? remove
@@ -130,19 +129,19 @@ exports.$remove = function (cb, withTransition) {
 function insert (vm, target, cb, withTransition, op1, op2) {
   target = query(target)
   var targetIsDetached = !_.inDoc(target)
+  var op = withTransition === false || targetIsDetached
+      ? op1
+      : op2
   var shouldCallHook =
     !targetIsDetached &&
     !vm._isAttached &&
     !_.inDoc(vm.$el)
   if (vm._isFragment) {
     _.mapNodeRange(vm._fragmentStart, vm._fragmentEnd, function (node) {
-      op1(node, target)
+      op(node, target, vm)
     })
     cb && cb()
   } else {
-    var op = withTransition === false || targetIsDetached
-      ? op1
-      : op2
     op(vm.$el, target, vm, cb)
   }
   if (shouldCallHook) {

src/fragment/fragment.js

@@ -77,11 +77,11 @@ Fragment.prototype.destroy = function () {
  */
 
 function singleBefore (target, withTransition) {
+  this.inserted = true
   var method = withTransition !== false
     ? transition.before
     : _.before
   method(this.node, target, this.vm)
-  this.inserted = true
   if (_.inDoc(this.node)) {
     this.callHook(attach)
   }
@@ -94,10 +94,10 @@ function singleBefore (target, withTransition) {
  */
 
 function singleRemove (destroy) {
+  this.inserted = false
   var shouldCallRemove = _.inDoc(this.node)
   var self = this
   transition.remove(this.node, this.vm, function () {
-    self.inserted = false
     if (shouldCallRemove) {
       self.callHook(detach)
     }
@@ -111,13 +111,18 @@ function singleRemove (destroy) {
  * Insert fragment before target, multi-nodes version
  *
  * @param {Node} target
+ * @param {Boolean} withTransition
  */
 
-function multiBefore (target) {
+function multiBefore (target, withTransition) {
+  this.inserted = true
+  var vm = this.vm
+  var method = withTransition !== false
+    ? transition.before
+    : _.before
   _.mapNodeRange(this.node, this.end, function (node) {
-    _.before(node, target)
+    method(node, target, vm)
   })
-  this.inserted = true
   if (_.inDoc(this.node)) {
     this.callHook(attach)
   }
@@ -130,18 +135,17 @@ function multiBefore (target) {
  */
 
 function multiRemove (destroy) {
-  var frag = this.frag
+  this.inserted = false
+  var self = this
   var shouldCallRemove = _.inDoc(this.node)
-  _.mapNodeRange(this.node, this.end, function (node) {
-    frag.appendChild(node)
+  _.removeNodeRange(this.node, this.end, this.vm, this.frag, function () {
+    if (shouldCallRemove) {
+      self.callHook(detach)
+    }
+    if (destroy) {
+      self.destroy()
+    }
   })
-  this.inserted = false
-  if (shouldCallRemove) {
-    this.callHook(detach)
-  }
-  if (destroy) {
-    this.destroy()
-  }
 }
 
 /**

src/util/dom.js

@@ -1,5 +1,6 @@
 var _ = require('./index')
 var config = require('../config')
+var transition = require('../transition')
 
 /**
  * Query an element selector if it's not an element already.
@@ -327,3 +328,35 @@ exports.mapNodeRange = function (node, end, op) {
   }
   op(end)
 }
+
+/**
+ * Remove a range of nodes with transition, store
+ * the nodes in a fragment with correct ordering,
+ * and call callback when done.
+ *
+ * @param {Node} start
+ * @param {Node} end
+ * @param {Vue} vm
+ * @param {DocumentFragment} frag
+ * @param {Function} cb
+ */
+
+exports.removeNodeRange = function (start, end, vm, frag, cb) {
+  var done = false
+  var removed = 0
+  var nodes = []
+  exports.mapNodeRange(start, end, function (node) {
+    if (node === end) done = true
+    nodes.push(node)
+    transition.remove(node, vm, onRemoved)
+  })
+  function onRemoved () {
+    removed++
+    if (done && removed >= nodes.length) {
+      for (var i = 0; i < nodes.length; i++) {
+        frag.appendChild(nodes[i])
+      }
+      cb && cb()
+    }
+  }
+}