js transitions => v-effect

Author: Evan You

src/compiler.js

@@ -341,8 +341,9 @@ CompilerProto.compile = function (node, root) {
         } else {
 
             // check transition & animation properties
-            node.vue_trans = utils.attr(node, 'transition')
-            node.vue_anim = utils.attr(node, 'animation')
+            node.vue_trans  = utils.attr(node, 'transition')
+            node.vue_anim   = utils.attr(node, 'animation')
+            node.vue_effect = utils.attr(node, 'effect')
 
             // replace innerHTML with partial
             partialId = utils.attr(node, 'partial')

src/config.js

@@ -8,7 +8,8 @@ var prefix = 'v',
         'partial',
         'component',
         'animation',
-        'transition'
+        'transition',
+        'effect'
     ],
     config = module.exports = {
 

src/directives/repeat.js

@@ -129,8 +129,6 @@ module.exports = {
         // extract child VM information, if any
         ViewModel = ViewModel || require('../viewmodel')
         this.Ctor = this.Ctor || ViewModel
-        // extract transition information
-        this.hasTrans = el.hasAttribute(config.attrs.transition)
         // extract child Id, if any
         this.childId = utils.attr(el, 'ref')
 
@@ -274,8 +272,9 @@ module.exports = {
 
                 el = this.el.cloneNode(true)
                 // process transition info before appending
-                el.vue_trans = utils.attr(el, 'transition', true)
-                el.vue_anim = utils.attr(el, 'animation', true)
+                el.vue_trans  = utils.attr(el, 'transition', true)
+                el.vue_anim   = utils.attr(el, 'animation', true)
+                el.vue_effect = utils.attr(el, 'effect', true)
                 // wrap primitive element in an object
                 if (utils.typeOf(data) !== 'Object') {
                     primitive = true

src/main.js

@@ -2,7 +2,7 @@ var config      = require('./config'),
     ViewModel   = require('./viewmodel'),
     utils       = require('./utils'),
     makeHash    = utils.hash,
-    assetTypes  = ['directive', 'filter', 'partial', 'transition', 'component']
+    assetTypes  = ['directive', 'filter', 'partial', 'effect', 'component']
 
 // require these so Browserify can catch them
 // so they can be used in Vue.require
@@ -13,7 +13,7 @@ ViewModel.options = config.globalAssets = {
     directives  : require('./directives'),
     filters     : require('./filters'),
     partials    : makeHash(),
-    transitions : makeHash(),
+    effects     : makeHash(),
     components  : makeHash()
 }
 

src/transition.js

@@ -40,23 +40,24 @@ var transition = module.exports = function (el, stage, cb, compiler) {
         return codes.INIT
     }
 
-    var transitionId = el.vue_trans,
-        isAnimation = el.vue_anim === ''
+    var hasTransition = el.vue_trans === '',
+        hasAnimation  = el.vue_anim === '',
+        effectId      = el.vue_effect
 
-    if (transitionId) {
+    if (effectId) {
         return applyTransitionFunctions(
             el,
             stage,
             changeState,
-            transitionId,
+            effectId,
             compiler
         )
-    } else if (transitionId === '' || isAnimation) {
+    } else if (hasTransition || hasAnimation) {
         return applyTransitionClass(
             el,
             stage,
             changeState,
-            isAnimation
+            hasAnimation
         )
     } else {
         changeState()
@@ -70,7 +71,7 @@ transition.codes = codes
 /**
  *  Togggle a CSS class to trigger transition
  */
-function applyTransitionClass (el, stage, changeState, isAnimation) {
+function applyTransitionClass (el, stage, changeState, hasAnimation) {
 
     if (!endEvents.trans) {
         changeState()
@@ -84,7 +85,7 @@ function applyTransitionClass (el, stage, changeState, isAnimation) {
         existingCallback = el.vue_trans_cb,
         enterClass       = config.enterClass,
         leaveClass       = config.leaveClass,
-        endEvent = isAnimation
+        endEvent = hasAnimation
             ? endEvents.anim
             : endEvents.trans
 
@@ -99,14 +100,14 @@ function applyTransitionClass (el, stage, changeState, isAnimation) {
     if (stage > 0) { // enter
 
         // set to hidden state before appending
-        if (!isAnimation) {
+        if (!hasAnimation) {
             classList.add(enterClass)
         }
         // append
         changeState()
         job = {}
         // trigger transition
-        if (!isAnimation) {
+        if (!hasAnimation) {
             job.execute = function () {
                 classList.remove(enterClass)
             }
@@ -154,9 +155,9 @@ function applyTransitionClass (el, stage, changeState, isAnimation) {
 
 }
 
-function applyTransitionFunctions (el, stage, changeState, functionId, compiler) {
+function applyTransitionFunctions (el, stage, changeState, effectId, compiler) {
 
-    var funcs = compiler.getOption('transitions', functionId)
+    var funcs = compiler.getOption('effects', effectId)
     if (!funcs) {
         changeState()
         return codes.JS_SKIP

test/unit/specs/api.js

@@ -278,26 +278,26 @@ describe('UNIT: API', function () {
         })
     })
 
-    describe('transition()', function () {
+    describe('effect()', function () {
 
-        var testId = 'api-trans-test',
-            transition = {}
+        var testId = 'api-effect-test',
+            effect = {}
 
-        it('should register a transition object', function () {
-            Vue.transition(testId, transition)
-            assert.strictEqual(assets.transitions[testId], transition)
+        it('should register a effect object', function () {
+            Vue.effect(testId, effect)
+            assert.strictEqual(assets.effects[testId], effect)
         })
 
-        it('should retrieve the transition if has only one arg', function () {
-            assert.strictEqual(Vue.transition(testId), transition)
+        it('should retrieve the effect if has only one arg', function () {
+            assert.strictEqual(Vue.effect(testId), effect)
         })
 
-        it('should work with v-transition', function (done) {
+        it('should work with v-effect', function (done) {
 
             var enterCalled = false,
                 leaveCalled = false
 
-            Vue.transition('transition-api-test', {
+            Vue.effect('effect-api-test', {
                 enter: function (el, done) {
                     enterCalled = true
                     done()
@@ -311,7 +311,7 @@ describe('UNIT: API', function () {
             var t = new Vue({
                 attributes: {
                     'v-show': 'show',
-                    'v-transition': 'transition-api-test'
+                    'v-effect': 'effect-api-test'
                 },
                 data: {
                     show: false
@@ -733,19 +733,19 @@ describe('UNIT: API', function () {
 
             })
 
-            describe('transitions', function () {
+            describe('effects', function () {
 
-                it('should get called during transitions', function (done) {
+                it('should get called during effects', function (done) {
 
                     var enterCalled = false,
                         leaveCalled = false
 
                     var t = new Vue({
                         attributes: {
                             'v-show': 'show',
-                            'v-transition': 'test'
+                            'v-effect': 'test'
                         },
-                        transitions: {
+                        effects: {
                             test: {
                                 enter: function (el, done) {
                                     enterCalled = true

test/unit/specs/transition.js

@@ -311,7 +311,7 @@ describe('UNIT: Transition', function () {
         if (type === 'css') {
             el.vue_trans = ''
         } else if (type === 'js') {
-            el.vue_trans = 'test'
+            el.vue_effect = 'test'
         }
         return el
     }

test/unit/specs/viewmodel.js

@@ -280,9 +280,9 @@ describe('UNIT: ViewModel', function () {
 
         var v = new Vue({
             attributes: {
-                'v-transition': 'test'
+                'v-effect': 'test'
             },
-            transitions: {
+            effects: {
                 test: {
                     enter: function (el, change) {
                         enterCalled = true