support dynamic transitions

yyx990803 · yyx990803 · commit 727f14562d12 · 2015-04-26T20:21:14.000-04:00
diff --git a/src/directives/transition.js b/src/directives/transition.js
@@ -4,10 +4,20 @@ module.exports = {
   isLiteral: true,
 
   bind: function () {
+    if (!this._isDynamicLiteral) {
+      this.update(this.expression)
+    }
+  },
+
+  update: function (id) {
+    var vm = this.el.__vue__ || this.vm
     this.el.__v_trans = {
-      id: this.expression,
+      id: id,
       // resolve the custom transition functions now
-      fns: this.vm.$options.transitions[this.expression]
+      // so the transition module knows this is a
+      // javascript transition without having to check
+      // computed CSS.
+      fns: vm.$options.transitions[id]
     }
   }
 
diff --git a/test/unit/specs/directives/transition_spec.js b/test/unit/specs/directives/transition_spec.js
@@ -1,4 +1,5 @@
 var _ = require('../../../../src/util')
+var Vue = _.Vue
 var def = require('../../../../src/directives/transition')
 
 if (_.inBrowser) {
@@ -10,6 +11,7 @@ if (_.inBrowser) {
         el: document.createElement('div'),
         expression: 'test',
         bind: def.bind,
+        update: def.update,
         vm: {
           $options: {
             transitions: {
@@ -23,5 +25,74 @@ if (_.inBrowser) {
       expect(dir.el.__v_trans.fns).toBe(fns)
     })
 
+    it('dynamic transitions', function (done) {
+      var el = document.createElement('div')
+      document.body.appendChild(el)
+      var calls = {
+        a: { enter: 0, leave: 0 },
+        b: { enter: 0, leave: 0 }
+      }
+      var vm = new Vue({
+        el: el,
+        template: '<div v-show="show" v-transition="{{trans}}"></div>',
+        data: {
+          show: true,
+          trans: 'a'
+        },
+        transitions: {
+          a: {
+            enter: function (el, done) {
+              calls.a.enter++
+              done()
+            },
+            leave: function (el, done) {
+              calls.a.leave++
+              done()
+            }
+          },
+          b: {
+            enter: function (el, done) {
+              calls.b.enter++
+              done()
+            },
+            leave: function (el, done) {
+              calls.b.leave++
+              done()
+            }
+          }
+        }
+      })
+
+      assertCalls(0, 0, 0, 0)
+      vm.show = false
+      _.nextTick(function () {
+        assertCalls(0, 1, 0, 0)
+        vm.trans = 'b'
+        vm.show = true
+        _.nextTick(function () {
+          assertCalls(0, 1, 1, 0)
+          vm.show = false
+          _.nextTick(function () {
+            assertCalls(0, 1, 1, 1)
+            vm.trans = 'a'
+            vm.show = true
+            _.nextTick(function () {
+              assertCalls(1, 1, 1, 1)
+              done()
+            })
+          })
+        })
+      })
+
+      function assertCalls (a, b, c, d) {
+        expect(el.firstChild.style.display).toBe(vm.show ? '' : 'none')
+        expect(calls.a.enter).toBe(a)
+        expect(calls.a.leave).toBe(b)
+        expect(calls.b.enter).toBe(c)
+        expect(calls.b.leave).toBe(d)
+      }
+
+    })
+
   })
 }
