Vue/vue
1
0
Fork 0
mirror of https://github.com/vuejs/vue.git synced 2024-11-21 20:28:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Revert "ensure leave transitions and enter transitions are triggered in the same frame (fix #4510)"

Browse Source 
This reverts commit 92ad0bd378.
This commit is contained in:
Evan You 2016-12-27 14:11:45 -05:00
parent 0bb2d4e2b6
commit 02e2d99e27
6 changed files with 95 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/move-animations/index.html
View File

@ -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 -->

4
src/platforms/web/runtime/modules/transition.js
View File

@ -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)
}

30
test/unit/features/component/component-keep-alive.spec.js
View File

@ -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(

35
test/unit/features/transition/transition-group.spec.js
View File

@ -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(() => {

34
test/unit/features/transition/transition-mode.spec.js
View File

@ -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(() => {

88
test/unit/features/transition/transition.spec.js
View File

@ -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(() => {