From b8b489efe4b827105d9603e9b369d645ce7ae903 Mon Sep 17 00:00:00 2001
From: Nikola Kovacs <nikola.kovacs@gmail.com>
Date: Thu, 3 Sep 2015 13:14:43 +0200
Subject: [PATCH] Don't set up css transition callback if there's a js
 callback.

Fixes #1241
---
 src/transition/transition.js                  | 20 +++++----
 test/unit/specs/transition/transition_spec.js | 44 +++++++++++++++++++
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/transition/transition.js b/src/transition/transition.js
index 1e3a9c924e7..849c9c0e028 100644
--- a/src/transition/transition.js
+++ b/src/transition/transition.js
@@ -95,16 +95,20 @@ p.enterNextTick = function () {
   _.nextTick(function () {
     this.justEntered = false
   }, this)
-  var type = this.getCssTransitionType(this.enterClass)
   var enterDone = this.enterDone
-  if (type === TYPE_TRANSITION) {
-    // trigger transition by removing enter class now
+  var type = this.getCssTransitionType(this.enterClass)
+  if (!this.pendingJsCb) {
+    if (type === TYPE_TRANSITION) {
+      // trigger transition by removing enter class now
+      removeClass(this.el, this.enterClass)
+      this.setupCssCb(transitionEndEvent, enterDone)
+    } else if (type === TYPE_ANIMATION) {
+      this.setupCssCb(animationEndEvent, enterDone)
+    } else {
+      enterDone()
+    }
+  } else if (type === TYPE_TRANSITION) {
     removeClass(this.el, this.enterClass)
-    this.setupCssCb(transitionEndEvent, enterDone)
-  } else if (type === TYPE_ANIMATION) {
-    this.setupCssCb(animationEndEvent, enterDone)
-  } else if (!this.pendingJsCb) {
-    enterDone()
   }
 }
 
diff --git a/test/unit/specs/transition/transition_spec.js b/test/unit/specs/transition/transition_spec.js
index b143eed325c..db8ed8c8748 100644
--- a/test/unit/specs/transition/transition_spec.js
+++ b/test/unit/specs/transition/transition_spec.js
@@ -342,6 +342,50 @@ if (_.inBrowser && !_.isIE9) {
         }
       })
 
+      it('css + js hook with callback before transitionend', function (done) {
+        document.body.removeChild(el)
+        el.classList.add('test')
+
+        // enter hook that expects a second argument
+        // indicates the user wants to control when the
+        // transition ends.
+        var enterCalled = false
+        hooks.enter = function (el, enterDone) {
+          enterCalled = true
+          setTimeout(function () {
+            enterDone()
+            testDone()
+          }, 20)
+        }
+
+        el.__v_trans = new Transition(el, 'test', hooks, vm)
+        transition.apply(el, 1, function () {
+          document.body.appendChild(el)
+          op()
+        }, vm, cb)
+        expect(hooks.beforeEnter).toHaveBeenCalled()
+        expect(op).toHaveBeenCalled()
+        expect(cb).not.toHaveBeenCalled()
+        expect(enterCalled).toBe(true)
+        _.nextTick(function () {
+          expect(el.classList.contains('test-enter')).toBe(false)
+          expect(hooks.afterEnter).not.toHaveBeenCalled()
+          _.on(el, _.transitionEndEvent, function () {
+            // callback should have been called, but only once, by the js callback
+            expect(cb).toHaveBeenCalled()
+            expect(cb.calls.count()).toBe(1)
+            expect(hooks.afterEnter).toHaveBeenCalled()
+            done()
+          })
+        })
+
+        // this is called by the enter hook
+        function testDone () {
+          expect(cb).toHaveBeenCalled()
+          expect(hooks.afterEnter).toHaveBeenCalled()
+        }
+      })
+
       it('clean up unfinished css callback', function (done) {
         el.__v_trans = new Transition(el, 'test', null, vm)
         el.classList.add('test')