improve css transition logic

Author: yyx990803

src/batcher.js

@@ -6,7 +6,6 @@ var _ = require('./util')
  */
 
 function Batcher () {
-  this._preFlush = null
   this.reset()
 }
 
@@ -46,10 +45,6 @@ p.push = function (job) {
  */
 
 p.flush = function () {
-  // before flush hook
-  if (this._preFlush) {
-    this._preFlush()
-  }
   // do not cache length because more jobs might be pushed
   // as we run existing jobs
   for (var i = 0; i < this.queue.length; i++) {

src/transition/css.js

@@ -1,16 +1,23 @@
 var _ = require('../util')
-var Batcher = require('../batcher')
-var batcher = new Batcher()
 var transDurationProp = _.transitionProp + 'Duration'
 var animDurationProp = _.animationProp + 'Duration'
 
 /**
  * Force layout before triggering transitions/animations
  */
 
-batcher._preFlush = function () {
+var justReflowed = false
+
+function reflow () {
+  if (justReflowed) return
+  justReflowed = true
   /* jshint unused: false */
   var f = document.documentElement.offsetHeight
+  _.nextTick(unlock)
+}
+
+function unlock () {
+  justReflowed = false
 }
 
 /**
@@ -78,11 +85,8 @@ module.exports = function (el, direction, op, data, cb) {
     op()
     transitionType = getTransitionType(el, data, enterClass)
     if (transitionType === 1) {
-      batcher.push({
-        run: function () {
-          classList.remove(enterClass)
-        }
-      })
+      reflow()
+      classList.remove(enterClass)
       // only listen for transition end if user has sent
       // in a callback
       if (cb) {
@@ -123,14 +127,6 @@ module.exports = function (el, direction, op, data, cb) {
     classList.add(leaveClass)
     transitionType = getTransitionType(el, data, leaveClass)
     if (transitionType) {
-      if (transitionType === 1) {
-        classList.remove(leaveClass)
-        batcher.push({
-          run: function () {
-            classList.add(leaveClass)
-          }
-        })
-      }
       endEvent = data.event = transitionType === 1
         ? _.transitionEndEvent
         : _.animationEndEvent

test/unit/specs/transition_spec.js

@@ -207,15 +207,12 @@ if (_.inBrowser && !_.isIE9) {
           transition.apply(el, -1, op, vm, cb)
           expect(op).not.toHaveBeenCalled()
           expect(cb).not.toHaveBeenCalled()
-          expect(el.classList.contains('test-leave')).toBe(false)
-          _.nextTick(function () {
-            expect(el.classList.contains('test-leave')).toBe(true)
-            _.on(el, _.transitionEndEvent, function () {
-              expect(op).toHaveBeenCalled()
-              expect(cb).toHaveBeenCalled()
-              expect(el.classList.contains('test-leave')).toBe(false)
-              done()
-            })
+          expect(el.classList.contains('test-leave')).toBe(true)
+          _.on(el, _.transitionEndEvent, function () {
+            expect(op).toHaveBeenCalled()
+            expect(cb).toHaveBeenCalled()
+            expect(el.classList.contains('test-leave')).toBe(false)
+            done()
           })
         })
       })