add transition class for v-transition elements

Author: yyx990803

src/directives/transition.js

@@ -1,3 +1,5 @@
+var _ = require('../util')
+
 module.exports = {
 
   priority: 1000,
@@ -9,7 +11,7 @@ module.exports = {
     }
   },
 
-  update: function (id) {
+  update: function (id, oldId) {
     var vm = this.el.__vue__ || this.vm
     this.el.__v_trans = {
       id: id,
@@ -19,6 +21,10 @@ module.exports = {
       // computed CSS.
       fns: vm.$options.transitions[id]
     }
+    if (oldId) {
+      _.removeClass(this.el, oldId + '-transition')
+    }
+    _.addClass(this.el, (id || 'v') + '-transition')
   }
 
 }

src/transition/css.js

@@ -4,6 +4,9 @@ var removeClass = _.removeClass
 var transDurationProp = _.transitionProp + 'Duration'
 var animDurationProp = _.animationProp + 'Duration'
 
+var TYPE_TRANSITION = 1
+var TYPE_ANIMATION = 2
+
 var queue = []
 var queued = false
 
@@ -43,7 +46,8 @@ function flush () {
   queue.forEach(run)
   queue = []
   queued = false
-  /* dummy return, so js linters don't complain about unused variable f */
+  // dummy return, so js linters don't complain about unused
+  // variable f
   return f
 }
 
@@ -63,13 +67,13 @@ function run (job) {
   var transitionType = getTransitionType(el, data, cls)
 
   if (job.dir > 0) { // ENTER
-    if (transitionType === 1) {
+    if (transitionType === TYPE_TRANSITION) {
       // trigger transition by removing enter class
       removeClass(el, cls)
       // only need to listen for transitionend if there's
       // a user callback
       if (cb) setupTransitionCb(_.transitionEndEvent)
-    } else if (transitionType === 2) {
+    } else if (transitionType === TYPE_ANIMATION) {
       // animations are triggered when class is added
       // so we just listen for animationend to remove it.
       setupTransitionCb(_.animationEndEvent, function () {
@@ -84,7 +88,7 @@ function run (job) {
     if (transitionType) {
       // leave transitions/animations are both triggered
       // by adding the class, just remove it on end event.
-      var event = transitionType === 1
+      var event = transitionType === TYPE_TRANSITION
         ? _.transitionEndEvent
         : _.animationEndEvent
       setupTransitionCb(event, function () {
@@ -130,8 +134,6 @@ function run (job) {
  * @param {Object} data
  * @param {String} className
  * @return {Number}
- *         1 - transition
- *         2 - animation
  */
 
 function getTransitionType (el, data, className) {
@@ -143,13 +145,13 @@ function getTransitionType (el, data, className) {
     inlineStyles[transDurationProp] ||
     computedStyles[transDurationProp]
   if (transDuration && transDuration !== '0s') {
-    type = 1
+    type = TYPE_TRANSITION
   } else {
     var animDuration =
       inlineStyles[animDurationProp] ||
       computedStyles[animDurationProp]
     if (animDuration && animDuration !== '0s') {
-      type = 2
+      type = TYPE_ANIMATION
     }
   }
   if (type) {

test/unit/specs/directives/repeat_spec.js

@@ -585,7 +585,11 @@ if (_.inBrowser) {
       })
       vm.items.splice(1, 1, {a:4})
       setTimeout(function () {
-        expect(el.innerHTML).toBe('<div>1</div><div>4</div><div>3</div>')
+        expect(el.innerHTML).toBe(
+          '<div class="test-transition">1</div>' +
+          '<div class="test-transition">4</div>' +
+          '<div class="test-transition">3</div>'
+        )
         document.body.removeChild(el)
         done()
       }, 100)
@@ -614,7 +618,7 @@ if (_.inBrowser) {
 
     it('nested track by', function (done) {
       assertTrackBy('<div v-repeat="list" track-by="id">{{msg}}<div v-repeat="list" track-by="id">{{msg}}</div></div>', function () {
-        assertTrackBy('<div v-transition v-repeat="list" track-by="id">{{msg}}<div v-transition v-repeat="list" track-by="id">{{msg}}</div></div>', done)
+        assertTrackBy('<div v-repeat="list" track-by="id">{{msg}}<div v-repeat="list" track-by="id">{{msg}}</div></div>', done)
       })
 
       function assertTrackBy(template, next) {

test/unit/specs/directives/transition_spec.js

@@ -23,6 +23,11 @@ if (_.inBrowser) {
       dir.bind()
       expect(dir.el.__v_trans.id).toBe('test')
       expect(dir.el.__v_trans.fns).toBe(fns)
+      expect(dir.el.className === 'test-transition')
+      dir.update('lol', 'test')
+      expect(dir.el.__v_trans.id).toBe('lol')
+      expect(dir.el.__v_trans.fns).toBeUndefined()
+      expect(dir.el.className === 'lol-transition')
     })
 
     it('dynamic transitions', function (done) {