animation use batcher - existing tests pass

Author: Evan You

src/batcher.js

@@ -7,7 +7,7 @@ function Batcher () {
 var BatcherProto = Batcher.prototype
 
 BatcherProto.push = function (job) {
-    if (!this.has[job.id]) {
+    if (!job.id || !this.has[job.id]) {
         this.queue.push(job)
         this.has[job.id] = job
         if (!this.waiting) {

src/binding.js

@@ -1,6 +1,6 @@
 var Batcher        = require('./batcher'),
     bindingBatcher = new Batcher(),
-    bindingId      = 0
+    bindingId      = 1
 
 /**
  *  Binding class.

src/transition.js

@@ -1,5 +1,8 @@
 var endEvents  = sniffEndEvents(),
     config     = require('./config'),
+    // batch enter animations so we only force the layout once
+    Batcher    = require('./batcher'),
+    batcher    = new Batcher(),
     // exit codes for testing
     codes = {
         CSS_E     : 1,
@@ -14,6 +17,12 @@ var endEvents  = sniffEndEvents(),
         SKIP      : -6
     }
 
+// force a layout so transition can be triggered
+batcher._preFlush = function () {
+    /* jshint unused: false */
+    var forceLayout = document.body.clientHeight
+}
+
 /**
  *  stage:
  *    1 = enter
@@ -70,19 +79,19 @@ function applyTransitionClass (el, stage, changeState, animation) {
 
     // if the browser supports transition,
     // it must have classList...
-    var onEnd,
-        classList         = el.classList,
-        lastLeaveCallback = el.vue_trans_cb,
-        enterClass        = config.enterClass,
-        leaveClass        = config.leaveClass,
-        isAnimation       = animation === '',
+    var onEnd, job,
+        classList        = el.classList,
+        existingCallback = el.vue_trans_cb,
+        enterClass       = config.enterClass,
+        leaveClass       = config.leaveClass,
+        isAnimation      = animation === '',
         endEvent = isAnimation
             ? endEvents.anim
             : endEvents.trans
 
-    // cancel unfinished leave transition
-    if (lastLeaveCallback) {
-        el.removeEventListener(endEvent, lastLeaveCallback)
+    // cancel unfinished callbacks and jobs
+    if (existingCallback) {
+        el.removeEventListener(endEvent, existingCallback)
         classList.remove(enterClass)
         classList.remove(leaveClass)
         el.vue_trans_cb = null
@@ -96,24 +105,27 @@ function applyTransitionClass (el, stage, changeState, animation) {
         }
         // append
         changeState()
-        // force a layout so transition can be triggered
-        /* jshint unused: false */
-        var forceLayout = el.clientHeight
+        job = {}
         // trigger transition
         if (!isAnimation) {
-            classList.remove(enterClass)
+            job.execute = function () {
+                classList.remove(enterClass)
+            }
         } else {
-            classList.add(enterClass)
             onEnd = function (e) {
                 if (e.target === el) {
                     el.removeEventListener(endEvent, onEnd)
                     el.vue_trans_cb = null
                     classList.remove(enterClass)
                 }
             }
-            el.addEventListener(endEvent, onEnd)
-            el.vue_trans_cb = onEnd
+            job.execute = function () {
+                classList.add(enterClass)
+                el.addEventListener(endEvent, onEnd)
+                el.vue_trans_cb = onEnd
+            }
         }
+        batcher.push(job)
         return codes.CSS_E
 
     } else { // leave

src/viewmodel.js

@@ -8,7 +8,7 @@ var Compiler   = require('./compiler'),
 
     // batch $watch callbacks
     watcherBatcher = new Batcher(),
-    watcherId      = 0
+    watcherId      = 1
 
 /**
  *  ViewModel exposed to the user that holds data,

test/functional/fixtures/animation.html

@@ -1,4 +1,4 @@
-<script src="../dist/vue.js"></script>
+<script src="../../../dist/vue.js"></script>
 <style type="text/css">
     h1 {
         display: inline-block;
@@ -70,4 +70,10 @@ <h1 v-animation v-if="ok">Hahahah</h1>
             ok: true
         }
     })
+    setTimeout(function () {
+        test.ok = !test.ok
+        setTimeout(function () {
+            test.ok = !test.ok
+        }, 100)
+    }, 100)
 </script>

test/unit/specs/transition.js

@@ -84,8 +84,11 @@ describe('UNIT: Transition', function () {
                 assert.notOk(el.classList.contains(leaveClass))
             })
 
-            it('should remove the class afterwards', function () {
-                assert.notOk(el.classList.contains(enterClass))
+            it('should remove the class afterwards', function (done) {
+                Vue.nextTick(function () {
+                    assert.notOk(el.classList.contains(enterClass))
+                    done()
+                })
             })
 
             it('should return correct code', function () {