v-animation first pass

Author: yyx990803

src/compiler.js

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

src/config.js

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

src/directives/repeat.js

@@ -275,6 +275,7 @@ 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)
                 // wrap primitive element in an object
                 if (utils.typeOf(data) !== 'Object') {
                     primitive = true

src/transition.js

@@ -1,4 +1,4 @@
-var endEvent   = sniffTransitionEndEvent(),
+var endEvents  = sniffEndEvents(),
     config     = require('./config'),
     // exit codes for testing
     codes = {
@@ -31,7 +31,8 @@ var transition = module.exports = function (el, stage, cb, compiler) {
         return codes.INIT
     }
 
-    var transitionId = el.vue_trans
+    var transitionId = el.vue_trans,
+        animation = el.vue_anim
 
     if (transitionId) {
         return applyTransitionFunctions(
@@ -41,11 +42,12 @@ var transition = module.exports = function (el, stage, cb, compiler) {
             transitionId,
             compiler
         )
-    } else if (transitionId === '') {
+    } else if (transitionId === '' || animation === '') {
         return applyTransitionClass(
             el,
             stage,
-            changeState
+            changeState,
+            animation
         )
     } else {
         changeState()
@@ -59,50 +61,73 @@ transition.codes = codes
 /**
  *  Togggle a CSS class to trigger transition
  */
-function applyTransitionClass (el, stage, changeState) {
+function applyTransitionClass (el, stage, changeState, animation) {
 
-    if (!endEvent) {
+    if (!endEvents.trans) {
         changeState()
         return codes.CSS_SKIP
     }
 
     // if the browser supports transition,
     // it must have classList...
-    var classList         = el.classList,
-        lastLeaveCallback = el.vue_trans_cb
+    var onEnd,
+        classList         = el.classList,
+        lastLeaveCallback = el.vue_trans_cb,
+        enterClass        = config.enterClass,
+        leaveClass        = config.leaveClass,
+        isAnimation       = animation === '',
+        endEvent = isAnimation
+            ? endEvents.anim
+            : endEvents.trans
+
+    // cancel unfinished leave transition
+    if (lastLeaveCallback) {
+        el.removeEventListener(endEvent, lastLeaveCallback)
+        classList.remove(enterClass)
+        classList.remove(leaveClass)
+        el.vue_trans_cb = null
+    }
 
     if (stage > 0) { // enter
 
-        // cancel unfinished leave transition
-        if (lastLeaveCallback) {
-            el.removeEventListener(endEvent, lastLeaveCallback)
-            classList.remove(config.leaveClass)
-            el.vue_trans_cb = null
-        }
-
         // set to hidden state before appending
-        classList.add(config.enterClass)
+        if (!isAnimation) {
+            classList.add(enterClass)
+        }
         // append
         changeState()
         // force a layout so transition can be triggered
         /* jshint unused: false */
         var forceLayout = el.clientHeight
         // trigger transition
-        classList.remove(config.enterClass)
+        if (!isAnimation) {
+            classList.remove(enterClass)
+        } else {
+            classList.add(enterClass)
+            onEnd = function (e) {
+                if (e.target === el) {
+                    el.removeEventListener(endEvent, onEnd)
+                    el.vue_trans_cb = null
+                    classList.remove(enterClass)
+                }
+            }
+            el.addEventListener(endEvent, onEnd)
+            el.vue_trans_cb = onEnd
+        }
         return codes.CSS_E
 
     } else { // leave
 
         if (el.offsetWidth || el.offsetHeight) {
             // trigger hide transition
-            classList.add(config.leaveClass)
-            var onEnd = function (e) {
+            classList.add(leaveClass)
+            onEnd = function (e) {
                 if (e.target === el) {
                     el.removeEventListener(endEvent, onEnd)
                     el.vue_trans_cb = null
                     // actually remove node here
                     changeState()
-                    classList.remove(config.leaveClass)
+                    classList.remove(leaveClass)
                 }
             }
             // attach transition end listener
@@ -150,17 +175,23 @@ function applyTransitionFunctions (el, stage, changeState, functionId, compiler)
 /**
  *  Sniff proper transition end event name
  */
-function sniffTransitionEndEvent () {
+function sniffEndEvents () {
     var el = document.createElement('vue'),
         defaultEvent = 'transitionend',
         events = {
             'transition'       : defaultEvent,
             'mozTransition'    : defaultEvent,
             'webkitTransition' : 'webkitTransitionEnd'
-        }
+        },
+        ret = {}
     for (var name in events) {
         if (el.style[name] !== undefined) {
-            return events[name]
+            ret.trans = events[name]
+            break
         }
     }
+    ret.anim = el.style.animation === ''
+        ? 'animationend'
+        : 'webkitAnimationEnd'
+    return ret
 }

test/functional/fixtures/animation.html

@@ -0,0 +1,73 @@
+<script src="../dist/vue.js"></script>
+<style type="text/css">
+    h1 {
+        display: inline-block;
+    }
+    .v-enter {
+        -webkit-animation: fadein .5s;
+        animation: fadein .5s;
+    }
+    .v-leave {
+        -webkit-animation: fadeout .5s;
+        animation: fadeout .5s;
+    }
+    @keyframes fadein {
+        0% {
+            transform: scale(0);
+        }
+        50% {
+            transform: scale(1.5);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+    @keyframes fadeout {
+        0% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(1.5);
+        }
+        100% {
+            transform: scale(0);
+        }
+    }
+    @-webkit-keyframes fadein {
+        0% {
+            -webkit-transform: scale(0);
+        }
+        50% {
+            -webkit-transform: scale(1.5);
+        }
+        100% {
+            -webkit-transform: scale(1);
+        }
+    }
+    @-webkit-keyframes fadeout {
+        0% {
+            -webkit-transform: scale(1);
+        }
+        50% {
+            -webkit-transform: scale(1.5);
+        }
+        100% {
+            -webkit-transform: scale(0);
+        }
+    }
+</style>
+
+<div id="test">
+    <h1 v-animation v-if="ok">Hahahah</h1>
+    <br>
+    <button v-on="click: ok = !ok">toggle</button>
+</div>
+
+<script>
+    var test = new Vue({
+        el: '#test',
+        data: {
+            ok: true
+        }
+    })
+</script>