enable transition again for fragment insert/removal

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()
+ }
+ }
+}