revert transition handling

Author: yyx990803

src/compiler/compile.js

@@ -576,7 +576,7 @@ function compileDirectives (attrs, options) {
       }
     } else
 
-    // speical case for el
+    // special case for el
     if (name === 'el' || name === 'bind-el') {
       dirs.push({
         name: 'el',
@@ -586,6 +586,16 @@ function compileDirectives (attrs, options) {
       })
     } else
 
+    // special case for transition
+    if (name === 'transition' || name === 'bind-transition') {
+      dirs.push({
+        name: 'transition',
+        arg: bindRE.test(name),
+        descriptors: [newDirParser.parse(value)],
+        def: options.directives.transition
+      })
+    }
+
     // attribute bindings
     if (bindRE.test(name)) {
       var attributeName = name.replace(bindRE, '')

src/deprecations.js

@@ -83,11 +83,7 @@ if (process.env.NODE_ENV !== 'production') {
     V_TRANSITION: function () {
       warn(
         'v-transition will no longer be a directive in 1.0.0; It will become a ' +
-        'special attribute without the prefix. Use "transition" instead. Also, ' +
-        'it will no longer attach the .v-transition class, but instead leave ' +
-        'the transition attribute on the element. If you were using the ' +
-        '".name-transition" CSS selector before, you should now use the ' +
-        '"[transition="name"]" selector instead.' +
+        'special attribute without the prefix. Use "transition" instead.' +
         newBindingSyntaxLink
       )
     },

src/directives/for.js

@@ -1,6 +1,5 @@
 var _ = require('../util')
 var config = require('../config')
-var transition = require('../transition')
 var FragmentFactory = require('../fragment/factory')
 var isObject = _.isObject
 var uid = 0
@@ -451,7 +450,7 @@ module.exports = {
 
   getStagger: function (frag, index, total, type) {
     type = type + 'Stagger'
-    var trans = transition.get(frag.node, this.vm)
+    var trans = frag.node.__v_trans
     var hooks = trans && trans.hooks
     var hook = hooks && (hooks[type] || hooks.stagger)
     return hook

src/directives/repeat.js

@@ -2,7 +2,6 @@ var _ = require('../util')
 var config = require('../config')
 var isObject = _.isObject
 var isPlainObject = _.isPlainObject
-var transition = require('../transition')
 var textParser = require('../parsers/text')
 var expParser = require('../parsers/expression')
 var templateParser = require('../parsers/template')
@@ -649,7 +648,7 @@ module.exports = {
 
   getStagger: function (vm, index, total, type) {
     type = type + 'Stagger'
-    var trans = transition.get(vm.$el, vm)
+    var trans = vm.$el.__v_trans
     var hooks = trans && trans.hooks
     var hook = hooks && (hooks[type] || hooks.stagger)
     return hook

src/directives/transition.js

@@ -9,8 +9,10 @@ module.exports = {
   isLiteral: true,
 
   bind: function () {
-    if (!this._isDynamicLiteral) {
+    if (!this._isDynamicLiteral && !this.arg) {
       this.update(this.expression)
+    } else if (this.arg) {
+      this._isDynamicLiteral = true
     }
   },
 

src/transition/index.js

@@ -1,5 +1,4 @@
 var _ = require('../util')
-var Transition = require('./transition')
 
 /**
  * Append with transition.
@@ -74,7 +73,7 @@ exports.removeThenAppend = function (el, target, vm, cb) {
  */
 
 var apply = exports.apply = function (el, direction, op, vm, cb) {
-  var transition = exports.get(el, vm)
+  var transition = el.__v_trans
   if (
     !transition ||
     // skip if there are no js hooks and CSS transition is
@@ -94,28 +93,3 @@ var apply = exports.apply = function (el, direction, op, vm, cb) {
   var action = direction > 0 ? 'enter' : 'leave'
   transition[action](op, cb)
 }
-
-/**
- * Get the transition object from an element, will create
- * one if it has the "transition" attribute but doesn't have
- * a transition object, or if the current transition object's
- * id doesn't match the desired id.
- *
- * @param {Element} el
- * @param {Vue} vm
- * @return {Transition|undefined}
- */
-
-exports.get = function (el, vm) {
-  var transition = el.__v_trans
-  var id = el.getAttribute && el.getAttribute('transition')
-  // create new transition object if
-  // 1. element has "transition" attribute
-  // 2. current transition object's id doesn't match
-  if (id != null && (!transition || transition.id !== id)) {
-    var hooks = _.resolveAsset(vm.$options, 'transitions', id)
-    id = id || 'v'
-    transition = el.__v_trans = new Transition(el, id, hooks, el.__vue__ || vm)
-  }
-  return transition
-}

test/unit/specs/directives/for/for_spec.js

@@ -609,9 +609,9 @@ if (_.inBrowser) {
       vm.items.splice(1, 1, {a: 4})
       setTimeout(function () {
         expect(el.innerHTML).toBe(
-          '<div transition="test">1</div>' +
-          '<div transition="test">4</div>' +
-          '<div transition="test">3</div>'
+          '<div class="test-transition">1</div>' +
+          '<div class="test-transition">4</div>' +
+          '<div class="test-transition">3</div>'
         )
         document.body.removeChild(el)
         done()

test/unit/specs/directives/for/for_stagger_spec.js

@@ -82,12 +82,12 @@ describe('v-for staggering transitions', function () {
     expect(el.innerHTML).toBe('')
     _.nextTick(function () {
       expect(el.children.length).toBe(1)
-      expect(el.children[0].className).toBe('stagger-enter')
+      expect(el.children[0].className).toBe('stagger-transition stagger-enter')
       expect(el.children[0].textContent).toBe('1')
       vm.list = [vm.list[0]] // remove second
       setTimeout(function () {
         // should have only one
-        expect(el.innerHTML).toBe('<div transition="stagger">1</div>')
+        expect(el.innerHTML).toBe('<div class="stagger-transition">1</div>')
         done()
       }, delayAmount * multiplier)
     })
@@ -115,15 +115,15 @@ describe('v-for staggering transitions', function () {
     expect(el.innerHTML).toBe('')
     _.nextTick(function () {
       expect(el.children.length).toBe(1)
-      expect(el.children[0].className).toBe('stagger-enter')
+      expect(el.children[0].className).toBe('stagger-transition stagger-enter')
       expect(el.children[0].textContent).toBe('1')
       vm.list = [vm.list[2], vm.list[1], vm.list[0]] // reorder
       setTimeout(function () {
         // should have correct order
         expect(el.innerHTML).toBe(
-          '<div transition="stagger">3</div>' +
-          '<div transition="stagger">2</div>' +
-          '<div transition="stagger">1</div>'
+          '<div class="stagger-transition">3</div>' +
+          '<div class="stagger-transition">2</div>' +
+          '<div class="stagger-transition">1</div>'
         )
         done()
       }, delayAmount * 3)
@@ -135,24 +135,24 @@ describe('v-for staggering transitions', function () {
     expect(el.innerHTML).toBe('')
     _.nextTick(function () {
       expect(el.children.length).toBe(1)
-      expect(el.children[0].className).toBe('stagger-enter')
+      expect(el.children[0].className).toBe('stagger-transition stagger-enter')
       expect(el.children[0].textContent).toBe('1')
       _.nextTick(function () {
-        expect(el.innerHTML).toBe('<div transition="stagger">1</div>')
+        expect(el.innerHTML).toBe('<div class="stagger-transition">1</div>')
         setTimeout(function () {
           expect(el.innerHTML).toBe(
-            '<div transition="stagger">1</div>' +
-            '<div transition="stagger">2</div>'
+            '<div class="stagger-transition">1</div>' +
+            '<div class="stagger-transition">2</div>'
           )
           vm.list = []
           _.nextTick(function () {
             expect(el.children.length).toBe(2)
-            expect(el.children[0].className).toBe('stagger-leave')
+            expect(el.children[0].className).toBe('stagger-transition stagger-leave')
             expect(el.children[0].textContent).toBe('1')
-            expect(el.children[1].className).toBe('')
+            expect(el.children[1].className).toBe('stagger-transition')
             expect(el.children[1].textContent).toBe('2')
             _.nextTick(function () {
-              expect(el.innerHTML).toBe('<div transition="stagger">2</div>')
+              expect(el.innerHTML).toBe('<div class="stagger-transition">2</div>')
               setTimeout(function () {
                 expect(el.innerHTML).toBe('')
                 done()

test/unit/specs/directives/ref_spec.js

@@ -89,7 +89,7 @@ if (_.inBrowser) {
         })
       })
     })
-  
+
     // #1147
     it('should be able to reference host via ref inside transclusion content', function (done) {
       var vm = new Vue({