diff --git a/src/runtime/dom-backend/class-util.js b/src/runtime/dom-backend/class-util.js index 5b462ade..e43b7fc5 100644 --- a/src/runtime/dom-backend/class-util.js +++ b/src/runtime/dom-backend/class-util.js @@ -29,7 +29,11 @@ export function setClass (el, cls) { export function addClass (el, cls) { if (el.classList) { - el.classList.add(cls) + 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) { - el.classList.remove(cls) + 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 + ' ' diff --git a/src/runtime/dom-backend/modules/class.js b/src/runtime/dom-backend/modules/class.js index 337b993d..f778b641 100644 --- a/src/runtime/dom-backend/modules/class.js +++ b/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) } } diff --git a/src/runtime/dom-backend/modules/transition.js b/src/runtime/dom-backend/modules/transition.js index ed9506e3..cd2911a8 100644 --- a/src/runtime/dom-backend/modules/transition.js +++ b/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(() => {