diff --git a/examples/move-animations/index.html b/examples/move-animations/index.html
index 70708814d..ae246607b 100644
--- a/examples/move-animations/index.html
+++ b/examples/move-animations/index.html
@@ -15,20 +15,18 @@
         border: 1px solid #666;
         box-sizing: border-box;
       }
-      /* 1. define transition property, duration and easing */
       .fade-move, .fade-enter-active, .fade-leave-active {
         transition: all .5s cubic-bezier(.55,0,.1,1);
       }
-      /* 2. define enter from / leave to state */
-      .fade-enter, .fade-leave-active {
+      .fade-enter {
+        opacity: 0;
+        transform: scaleY(0) translate(30px, 0);
+      }
+      .fade-leave-active {
+        position: absolute;
         opacity: 0;
         transform: scaleY(0.01) translate(30px, 0);
       }
-      /* 3. make leaving items position: absolute so that
-            remaining items can animate to desired positions */
-      .fade-leave, .fade-leave-active {
-        position: absolute;
-      }
     </style>
     <script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
     <!-- Delete ".min" for console warnings in development -->
diff --git a/src/platforms/web/runtime/modules/transition.js b/src/platforms/web/runtime/modules/transition.js
index 697bd6103..a9176c1b2 100644
--- a/src/platforms/web/runtime/modules/transition.js
+++ b/src/platforms/web/runtime/modules/transition.js
@@ -112,9 +112,9 @@ export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) {
   beforeEnterHook && beforeEnterHook(el)
   if (expectsCSS) {
     addTransitionClass(el, startClass)
+    addTransitionClass(el, activeClass)
     nextFrame(() => {
       removeTransitionClass(el, startClass)
-      addTransitionClass(el, activeClass)
       if (!cb.cancelled && !userWantsControl) {
         whenTransitionEnds(el, type, cb)
       }
@@ -206,9 +206,9 @@ export function leave (vnode: VNodeWithData, rm: Function) {
     beforeLeave && beforeLeave(el)
     if (expectsCSS) {
       addTransitionClass(el, leaveClass)
+      addTransitionClass(el, leaveActiveClass)
       nextFrame(() => {
         removeTransitionClass(el, leaveClass)
-        addTransitionClass(el, leaveActiveClass)
         if (!cb.cancelled && !userWantsControl) {
           whenTransitionEnds(el, type, cb)
         }
diff --git a/test/unit/features/component/component-keep-alive.spec.js b/test/unit/features/component/component-keep-alive.spec.js
index d3000eb23..fa6fde314 100644
--- a/test/unit/features/component/component-keep-alive.spec.js
+++ b/test/unit/features/component/component-keep-alive.spec.js
@@ -283,7 +283,7 @@ describe('Component keep-alive', () => {
       vm.view = 'two'
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave">one</div><!---->'
+          '<div class="test test-leave test-leave-active">one</div><!---->'
         )
         assertHookCalls(one, [1, 1, 1, 1, 0])
         assertHookCalls(two, [0, 0, 0, 0, 0])
@@ -295,7 +295,7 @@ describe('Component keep-alive', () => {
         expect(vm.$el.innerHTML).toBe('<!---->')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-enter">two</div>'
+          '<div class="test test-enter test-enter-active">two</div>'
         )
         assertHookCalls(one, [1, 1, 1, 1, 0])
         assertHookCalls(two, [1, 1, 1, 0, 0])
@@ -313,7 +313,7 @@ describe('Component keep-alive', () => {
         vm.view = 'one'
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave">two</div><!---->'
+          '<div class="test test-leave test-leave-active">two</div><!---->'
         )
         assertHookCalls(one, [1, 1, 1, 1, 0])
         assertHookCalls(two, [1, 1, 1, 1, 0])
@@ -325,7 +325,7 @@ describe('Component keep-alive', () => {
         expect(vm.$el.innerHTML).toBe('<!---->')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-enter">one</div>'
+          '<div class="test test-enter test-enter-active">one</div>'
         )
         assertHookCalls(one, [1, 1, 2, 1, 0])
         assertHookCalls(two, [1, 1, 1, 1, 0])
@@ -369,7 +369,7 @@ describe('Component keep-alive', () => {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           '<div class="test">one</div>' +
-          '<div class="test test-enter">two</div>'
+          '<div class="test test-enter test-enter-active">two</div>'
         )
         assertHookCalls(one, [1, 1, 1, 1, 0])
         assertHookCalls(two, [1, 1, 1, 0, 0])
@@ -385,7 +385,7 @@ describe('Component keep-alive', () => {
         )
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave">one</div>' +
+          '<div class="test test-leave test-leave-active">one</div>' +
           '<div class="test">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -404,7 +404,7 @@ describe('Component keep-alive', () => {
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
           '<div class="test">two</div>' +
-          '<div class="test test-enter">one</div>'
+          '<div class="test test-enter test-enter-active">one</div>'
         )
         assertHookCalls(one, [1, 1, 2, 1, 0])
         assertHookCalls(two, [1, 1, 1, 1, 0])
@@ -420,7 +420,7 @@ describe('Component keep-alive', () => {
         )
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave">two</div>' +
+          '<div class="test test-leave test-leave-active">two</div>' +
           '<div class="test">one</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -460,7 +460,7 @@ describe('Component keep-alive', () => {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           '<div class="test">one</div>' +
-          '<div class="test test-enter">two</div>'
+          '<div class="test test-enter test-enter-active">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -476,7 +476,7 @@ describe('Component keep-alive', () => {
         // 3. a new "one" is created and entering
         expect(vm.$el.innerHTML).toBe(
           '<div class="test">two</div>' +
-          '<div class="test test-enter">one</div>'
+          '<div class="test test-enter test-enter-active">one</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -490,7 +490,7 @@ describe('Component keep-alive', () => {
         )
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave">two</div>' +
+          '<div class="test test-leave test-leave-active">two</div>' +
           '<div class="test">one</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -527,8 +527,8 @@ describe('Component keep-alive', () => {
       vm.view = 'bar'
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test v-leave">foo</div>' +
-          '<div class="test test-enter">bar</div>'
+          '<div class="test v-leave v-leave-active">foo</div>' +
+          '<div class="test test-enter test-enter-active">bar</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -542,8 +542,8 @@ describe('Component keep-alive', () => {
         vm.view = 'foo'
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave">bar</div>' +
-          '<div class="test v-enter">foo</div>'
+          '<div class="test test-leave test-leave-active">bar</div>' +
+          '<div class="test v-enter v-enter-active">foo</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
diff --git a/test/unit/features/transition/transition-group.spec.js b/test/unit/features/transition/transition-group.spec.js
index d72096f63..d1f3ed2e8 100644
--- a/test/unit/features/transition/transition-group.spec.js
+++ b/test/unit/features/transition/transition-group.spec.js
@@ -43,8 +43,8 @@ if (!isIE9) {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
             ['a', 'b', 'c'].map(i => `<div class="test">${i}</div>`).join('') +
-            `<div class="test v-enter">d</div>` +
-            `<div class="test v-enter">e</div>` +
+            `<div class="test v-enter v-enter-active">d</div>` +
+            `<div class="test v-enter v-enter-active">e</div>` +
           `</span>`
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -70,9 +70,9 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            `<div class="test v-leave">a</div>` +
+            `<div class="test v-leave v-leave-active">a</div>` +
             `<div class="test">b</div>` +
-            `<div class="test v-leave">c</div>` +
+            `<div class="test v-leave v-leave-active">c</div>` +
           `</span>`
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -98,10 +98,10 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            `<div class="test v-leave">a</div>` +
+            `<div class="test v-leave v-leave-active">a</div>` +
             `<div class="test">b</div>` +
             `<div class="test">c</div>` +
-            `<div class="test v-enter">d</div>` +
+            `<div class="test v-enter v-enter-active">d</div>` +
           `</span>`
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -128,10 +128,10 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            `<div class="test v-leave">a</div>` +
+            `<div class="test v-leave v-leave-active">a</div>` +
             `<div class="test">b</div>` +
             `<div class="test">c</div>` +
-            `<div class="test v-enter">d</div>` +
+            `<div class="test v-enter v-enter-active">d</div>` +
           `</span>`
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -157,7 +157,7 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            vm.items.map(i => `<div class="test v-enter">${i}</div>`).join('') +
+            vm.items.map(i => `<div class="test v-enter v-enter-active">${i}</div>`).join('') +
           `</span>`
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -216,19 +216,10 @@ if (!isIE9) {
             `<div class="test">a</div>` +
             `<div class="test">b</div>` +
             `<div class="test">c</div>` +
-            `<div class="test v-enter">d</div>` +
+            `<div class="test v-enter v-enter-active">d</div>` +
           `</span>`
         )
         expect(beforeEnterSpy.calls.count()).toBe(1)
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.innerHTML).toBe(
-          `<span>` +
-            `<div class="test">a</div>` +
-            `<div class="test">b</div>` +
-            `<div class="test">c</div>` +
-            `<div class="test v-enter-active">d</div>` +
-          `</span>`
-        )
       }).thenWaitFor(_next => { next = _next }).then(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
@@ -270,10 +261,10 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
           `<span>` +
-            `<div class="test group-enter">d</div>` +
+            `<div class="test group-enter group-enter-active">d</div>` +
             `<div class="test">b</div>` +
             `<div class="test group-move">a</div>` +
-            `<div class="test group-leave group-move">c</div>` +
+            `<div class="test group-leave group-leave-active group-move">c</div>` +
           `</span>`
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -282,7 +273,7 @@ if (!isIE9) {
             `<div class="test group-enter-active">d</div>` +
             `<div class="test">b</div>` +
             `<div class="test group-move">a</div>` +
-            `<div class="test group-move group-leave-active">c</div>` +
+            `<div class="test group-leave-active group-move">c</div>` +
           `</span>`
         )
       }).thenWaitFor(duration * 2).then(() => {
diff --git a/test/unit/features/transition/transition-mode.spec.js b/test/unit/features/transition/transition-mode.spec.js
index 36b7d58eb..a86fc9dae 100644
--- a/test/unit/features/transition/transition-mode.spec.js
+++ b/test/unit/features/transition/transition-mode.spec.js
@@ -32,8 +32,8 @@ if (!isIE9) {
       vm.view = 'two'
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test v-leave">one</div>' +
-          '<div class="test v-enter">two</div>'
+          '<div class="test v-leave v-leave-active">one</div>' +
+          '<div class="test v-enter v-enter-active">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -68,7 +68,7 @@ if (!isIE9) {
       vm.view = 'two'
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave">one</div><!---->'
+          '<div class="test test-leave test-leave-active">one</div><!---->'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -78,7 +78,7 @@ if (!isIE9) {
         expect(vm.$el.innerHTML).toBe('<!---->')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-enter">two</div>'
+          '<div class="test test-enter test-enter-active">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -113,7 +113,7 @@ if (!isIE9) {
       vm.view = 'two'
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave">one</div><!---->'
+          '<div class="test test-leave test-leave-active">one</div><!---->'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -126,7 +126,7 @@ if (!isIE9) {
         expect(vm.$el.innerHTML).toBe('<!---->')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-enter">two</div>'
+          '<div class="test test-enter test-enter-active">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -161,7 +161,7 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           '<div class="test">one</div>' +
-          '<div class="test test-enter">two</div>'
+          '<div class="test test-enter test-enter-active">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -175,7 +175,7 @@ if (!isIE9) {
         )
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave">one</div>' +
+          '<div class="test test-leave test-leave-active">one</div>' +
           '<div class="test">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -211,7 +211,7 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           '<div class="test">one</div>' +
-          '<div class="test test-enter">two</div>'
+          '<div class="test test-enter test-enter-active">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -227,7 +227,7 @@ if (!isIE9) {
         // 3. a new "one" is created and entering
         expect(vm.$el.innerHTML).toBe(
           '<div class="test">two</div>' +
-          '<div class="test test-enter">one</div>'
+          '<div class="test test-enter test-enter-active">one</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -241,7 +241,7 @@ if (!isIE9) {
         )
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave">two</div>' +
+          '<div class="test test-leave test-leave-active">two</div>' +
           '<div class="test">one</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
@@ -270,8 +270,8 @@ if (!isIE9) {
       vm.view = 'two'
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test v-leave">one</div>' +
-          '<div class="test v-enter">two</div>'
+          '<div class="test v-leave v-leave-active">one</div>' +
+          '<div class="test v-enter v-enter-active">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -305,7 +305,7 @@ if (!isIE9) {
       vm.view = 'two'
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave">one</div><!---->'
+          '<div class="test test-leave test-leave-active">one</div><!---->'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -315,7 +315,7 @@ if (!isIE9) {
         expect(vm.$el.innerHTML).toBe('<!---->')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-enter">two</div>'
+          '<div class="test test-enter test-enter-active">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -349,7 +349,7 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(vm.$el.innerHTML).toBe(
           '<div class="test">one</div>' +
-          '<div class="test test-enter">two</div>'
+          '<div class="test test-enter test-enter-active">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe(
@@ -363,7 +363,7 @@ if (!isIE9) {
         )
       }).then(() => {
         expect(vm.$el.innerHTML).toBe(
-          '<div class="test test-leave">one</div>' +
+          '<div class="test test-leave test-leave-active">one</div>' +
           '<div class="test">two</div>'
         )
       }).thenWaitFor(nextFrame).then(() => {
diff --git a/test/unit/features/transition/transition.spec.js b/test/unit/features/transition/transition.spec.js
index 02aaea5af..d1ceeeafe 100644
--- a/test/unit/features/transition/transition.spec.js
+++ b/test/unit/features/transition/transition.spec.js
@@ -23,14 +23,14 @@ if (!isIE9) {
       expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave')
+        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test v-leave-active')
       }).thenWaitFor(duration + buffer).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter')
+        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test v-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -48,14 +48,14 @@ if (!isIE9) {
       expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-leave')
+        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
       }).thenWaitFor(duration + buffer).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test test-enter')
+        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -83,14 +83,14 @@ if (!isIE9) {
       expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test bye')
+        expect(vm.$el.children[0].className).toBe('test bye byebye active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test byebye active')
       }).thenWaitFor(duration + buffer).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test hello')
+        expect(vm.$el.children[0].className).toBe('test hello hello-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test hello-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -117,7 +117,7 @@ if (!isIE9) {
       expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-leave')
+        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -125,7 +125,7 @@ if (!isIE9) {
         vm.ok = true
         vm.trans = 'changed'
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test changed-enter')
+        expect(vm.$el.children[0].className).toBe('test changed-enter changed-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test changed-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -161,7 +161,7 @@ if (!isIE9) {
       expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test bye')
+        expect(vm.$el.children[0].className).toBe('test bye byebye active')
         expect(leave).toHaveBeenCalled()
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test byebye active')
@@ -169,7 +169,7 @@ if (!isIE9) {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test hello')
+        expect(vm.$el.children[0].className).toBe('test hello hello-active')
         expect(enter).toHaveBeenCalled()
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test hello-active')
@@ -231,7 +231,7 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(beforeLeaveSpy).toHaveBeenCalledWith(_el)
         expect(onLeaveSpy).toHaveBeenCalledWith(_el)
-        expect(vm.$el.children[0].className).toBe('test test-leave')
+        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(afterLeaveSpy).not.toHaveBeenCalled()
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
@@ -243,7 +243,7 @@ if (!isIE9) {
         _el = vm.$el.children[0]
         expect(beforeEnterSpy).toHaveBeenCalledWith(_el)
         expect(onEnterSpy).toHaveBeenCalledWith(_el)
-        expect(vm.$el.children[0].className).toBe('test test-enter')
+        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(afterEnterSpy).not.toHaveBeenCalled()
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
@@ -316,7 +316,7 @@ if (!isIE9) {
       waitForUpdate(() => {
         expect(beforeLeaveSpy).toHaveBeenCalledWith(_el)
         expect(onLeaveSpy).toHaveBeenCalledWith(_el)
-        expect(vm.$el.children[0].className).toBe('test test-leave')
+        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(afterLeaveSpy).not.toHaveBeenCalled()
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
@@ -328,7 +328,7 @@ if (!isIE9) {
         _el = vm.$el.children[0]
         expect(beforeEnterSpy).toHaveBeenCalledWith(_el)
         expect(onEnterSpy).toHaveBeenCalledWith(_el)
-        expect(vm.$el.children[0].className).toBe('test test-enter')
+        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(afterEnterSpy).not.toHaveBeenCalled()
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
@@ -358,7 +358,7 @@ if (!isIE9) {
       }).$mount(el)
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-leave')
+        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -369,7 +369,7 @@ if (!isIE9) {
       }).then(() => {
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test test-enter')
+        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -424,13 +424,13 @@ if (!isIE9) {
       vm.ok = false
       waitForUpdate(() => {
         expect(leaveSpy).toHaveBeenCalled()
-        expect(vm.$el.innerHTML).toBe('<div class="nope-leave">foo</div><!---->')
+        expect(vm.$el.innerHTML).toBe('<div class="nope-leave nope-leave-active">foo</div><!---->')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toBe('<!---->')
         vm.ok = true
       }).then(() => {
         expect(enterSpy).toHaveBeenCalled()
-        expect(vm.$el.innerHTML).toBe('<div class="nope-enter">foo</div>')
+        expect(vm.$el.innerHTML).toBe('<div class="nope-enter nope-enter-active">foo</div>')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.innerHTML).toMatch(/<div( class="")?>foo<\/div>/)
       }).then(done)
@@ -455,14 +455,12 @@ if (!isIE9) {
       expect(vm.$el.innerHTML).toBe('<!---->')
       vm.ok = true
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-enter')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test test-enter-active')
+        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
       }).thenWaitFor(duration / 2).then(() => {
         vm.ok = false
       }).then(() => {
         expect(spy).toHaveBeenCalled()
-        expect(vm.$el.children[0].className).toBe('test test-leave')
+        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -489,15 +487,13 @@ if (!isIE9) {
       expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-leave')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test test-leave-active')
+        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')
       }).thenWaitFor(duration / 2).then(() => {
         vm.ok = true
       }).then(() => {
         expect(spy).toHaveBeenCalled()
         expect(vm.$el.children.length).toBe(1) // should have removed leaving element
-        expect(vm.$el.children[0].className).toBe('test test-enter')
+        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -523,7 +519,7 @@ if (!isIE9) {
       expect(vm.$el.children[0].className).toBe('test')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-leave')
+        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -531,7 +527,7 @@ if (!isIE9) {
         vm.ok = true
       }).then(() => {
         expect(vm.$el.children[0].style.display).toBe('')
-        expect(vm.$el.children[0].className).toBe('test test-enter')
+        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -559,7 +555,7 @@ if (!isIE9) {
       expect(vm.$el.children[0].style.display).toBe('')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-leave')
+        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -567,7 +563,7 @@ if (!isIE9) {
         vm.ok = true
       }).then(() => {
         expect(vm.$el.children[0].style.display).toBe('')
-        expect(vm.$el.children[0].className).toBe('test test-enter')
+        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -594,14 +590,14 @@ if (!isIE9) {
       expect(vm.$el.children[0].style.display).toBe('')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-leave')
+        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
       }).thenWaitFor(10).then(() => {
         vm.ok = true
       }).then(() => {
         expect(spy).toHaveBeenCalled()
-        expect(vm.$el.children[0].className).toBe('test test-enter')
+        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -625,14 +621,14 @@ if (!isIE9) {
       expect(vm.$el.innerHTML).toBe('<div>foo</div>')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test-anim-leave')
+        expect(vm.$el.children[0].className).toBe('test-anim-leave test-anim-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test-anim-leave-active')
       }).thenWaitFor(duration + buffer).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test-anim-enter')
+        expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test-anim-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -656,7 +652,7 @@ if (!isIE9) {
       expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-anim-long-leave')
+        expect(vm.$el.children[0].className).toBe('test test-anim-long-leave test-anim-long-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-anim-long-leave-active')
       }).thenWaitFor(duration + 5).then(() => {
@@ -666,7 +662,7 @@ if (!isIE9) {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test test-anim-long-enter')
+        expect(vm.$el.children[0].className).toBe('test test-anim-long-enter test-anim-long-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-anim-long-enter-active')
       }).thenWaitFor(duration + 5).then(() => {
@@ -692,7 +688,7 @@ if (!isIE9) {
       }).$mount(el)
 
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-appear')
+        expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-appear-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -713,7 +709,7 @@ if (!isIE9) {
       }).$mount(el)
 
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-enter')
+        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -737,7 +733,7 @@ if (!isIE9) {
       expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave')
+        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave v-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -746,7 +742,7 @@ if (!isIE9) {
         expect(vm.$el.childNodes[0].textContent).toBe('')
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter')
+        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter v-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -779,14 +775,14 @@ if (!isIE9) {
       expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave')
+        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test v-leave-active')
       }).thenWaitFor(duration + buffer).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter')
+        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test v-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -817,14 +813,14 @@ if (!isIE9) {
       expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave')
+        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test v-leave-active')
       }).thenWaitFor(duration + buffer).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter')
+        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test v-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {
@@ -851,14 +847,14 @@ if (!isIE9) {
       expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
       vm.ok = false
       waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test test-leave')
+        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-leave-active')
       }).thenWaitFor(duration + buffer).then(() => {
         expect(vm.$el.children.length).toBe(0)
         vm.ok = true
       }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test test-enter')
+        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
       }).thenWaitFor(nextFrame).then(() => {
         expect(vm.$el.children[0].className).toBe('test test-enter-active')
       }).thenWaitFor(duration + buffer).then(() => {