transition wip

src/runtime/dom-backend/class-util.js

@@ -29,7 +29,11 @@ export function setClass (el, cls) {
 
 export function addClass (el, cls) {
   if (el.classList) {
+    if (cls.indexOf(' ') > -1) {
+      cls.split(/\s+/).forEach(c => el.classList.add(c))
+    } else {
       el.classList.add(cls)
+    }
   } else {
     let cur = ' ' + getClass(el) + ' '
     if (cur.indexOf(' ' + cls + ' ') < 0) {
@@ -47,7 +51,11 @@ export function addClass (el, cls) {
 
 export function removeClass (el, cls) {
   if (el.classList) {
+    if (cls.indexOf(' ') > -1) {
+      cls.split(/\s+/).forEach(c => el.classList.remove(c))
+    } else {
       el.classList.remove(cls)
+    }
   } else {
     let cur = ' ' + getClass(el) + ' '
     let tar = ' ' + cls + ' '

src/runtime/dom-backend/modules/class.js

@@ -2,13 +2,14 @@ import { isArray, isObject } from '../../util/index'
 import { setClass } from '../class-util'
 
 function updateClass (oldVnode, vnode) {
+  const el = vnode.elm
   let dynamicClass = vnode.data.class
   let staticClass = vnode.data.staticClass
-  const el = vnode.elm
-  const activeClass = el._activeClass
-  if (staticClass || dynamicClass || activeClass) {
+  let transitionClass = el._transitionClasses
+  if (staticClass || dynamicClass || transitionClass) {
     dynamicClass = genClass(dynamicClass)
-    const cls = concatClass(concatClass(staticClass, dynamicClass), activeClass)
+    transitionClass = genClass(transitionClass)
+    const cls = concat(concat(staticClass, dynamicClass), transitionClass)
     if (cls !== oldVnode.class) {
       setClass(el, cls)
     }
@@ -16,7 +17,7 @@ function updateClass (oldVnode, vnode) {
   }
 }
 
-function concatClass (a, b) {
+function concat (a, b) {
   return a ? b ? (a + ' ' + b) : a : (b || '')
 }
 
@@ -24,12 +25,8 @@ function genClass (data) {
   if (!data) {
     return ''
   }
-  if (isObject(data)) {
-    let res = ''
-    for (var key in data) {
-      if (data[key]) res += key + ' '
-    }
-    return res.slice(0, -1)
+  if (typeof data === 'string') {
+    return data
   }
   if (isArray(data)) {
     let res = ''
@@ -38,8 +35,12 @@ function genClass (data) {
     }
     return res.slice(0, -1)
   }
-  if (typeof data === 'string') {
-    return data
+  if (isObject(data)) {
+    let res = ''
+    for (var key in data) {
+      if (data[key]) res += key + ' '
+    }
+    return res.slice(0, -1)
   }
 }
 

src/runtime/dom-backend/modules/transition.js

@@ -20,18 +20,16 @@ export default isIE9 ? {} : {
       // apply enter class
       const enterClass = data.enterClass
       if (enterClass) {
-        addClass(el, enterClass)
+        addTransitionClass(el, enterClass)
         nextFrame(() => {
-          removeClass(el, enterClass)
+          removeTransitionClass(el, enterClass)
         })
       }
       const enterActiveClass = data.enterActiveClass
       if (enterActiveClass) {
-        el._activeClass = enterActiveClass
-        addClass(el, enterActiveClass)
+        addTransitionClass(el, enterActiveClass)
         el.addEventListener(transitionEndEvent, () => {
-          el._activeClass = null
-          removeClass(el, enterActiveClass)
+          removeTransitionClass(el, enterActiveClass)
         })
       }
     }
@@ -42,6 +40,16 @@ export default isIE9 ? {} : {
   }
 }
 
+function addTransitionClass (el, cls) {
+  (el._transitionClasses || (el._transitionClasses = [])).push(cls)
+  addClass(el, cls)
+}
+
+function removeTransitionClass (el, cls) {
+  el._transitionClasses.$remove(cls)
+  removeClass(el, cls)
+}
+
 const raf = (inBrowser && window.requestAnimationFrame) || setTimeout
 function nextFrame (fn) {
   raf(() => {