Vue/vue
1
0
Fork 0
mirror of https://github.com/vuejs/vue.git synced 2024-11-22 04:39:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Evan You 2016-12-21 22:03:50 -05:00
parent dacd0cf582
commit 92ad0bd378
6 changed files with 110 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,18 +15,20 @@
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);
}
.fade-enter {
opacity: 0;
transform: scaleY(0) translate(30px, 0);
}
.fade-leave-active {
position: absolute;
/* 2. define enter from / leave to state */
.fade-enter, .fade-leave-active {
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 test-leave-active">one</div><!---->'
'<div class="test test-leave">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 test-enter-active">two</div>'
'<div class="test test-enter">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 test-leave-active">two</div><!---->'
'<div class="test test-leave">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 test-enter-active">one</div>'
'<div class="test test-enter">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 test-enter-active">two</div>'
'<div class="test test-enter">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 test-leave-active">one</div>' +
'<div class="test test-leave">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 test-enter-active">one</div>'
'<div class="test test-enter">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 test-leave-active">two</div>' +
'<div class="test test-leave">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 test-enter-active">two</div>'
'<div class="test test-enter">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 test-enter-active">one</div>'
'<div class="test test-enter">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 test-leave-active">two</div>' +
'<div class="test test-leave">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 v-leave-active">foo</div>' +
'<div class="test test-enter test-enter-active">bar</div>'
'<div class="test v-leave">foo</div>' +
'<div class="test test-enter">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 test-leave-active">bar</div>' +
'<div class="test v-enter v-enter-active">foo</div>'
'<div class="test test-leave">bar</div>' +
'<div class="test v-enter">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 v-enter-active">d</div>` +
`<div class="test v-enter v-enter-active">e</div>` +
`<div class="test v-enter">d</div>` +
`<div class="test v-enter">e</div>` +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
@ -70,9 +70,9 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
`<span>` +
`<div class="test v-leave v-leave-active">a</div>` +
`<div class="test v-leave">a</div>` +
`<div class="test">b</div>` +
`<div class="test v-leave v-leave-active">c</div>` +
`<div class="test v-leave">c</div>` +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
@ -98,10 +98,10 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
`<span>` +
`<div class="test v-leave v-leave-active">a</div>` +
`<div class="test v-leave">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test v-enter v-enter-active">d</div>` +
`<div class="test v-enter">d</div>` +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
@ -128,10 +128,10 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
`<span>` +
`<div class="test v-leave v-leave-active">a</div>` +
`<div class="test v-leave">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test v-enter v-enter-active">d</div>` +
`<div class="test v-enter">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 v-enter-active">${i}</div>`).join('') +
vm.items.map(i => `<div class="test v-enter">${i}</div>`).join('') +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
@ -216,10 +216,19 @@ if (!isIE9) {
`<div class="test">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test v-enter v-enter-active">d</div>` +
`<div class="test v-enter">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>` +
@ -261,10 +270,10 @@ if (!isIE9) {
waitForUpdate(() => {
expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
`<span>` +
`<div class="test group-enter group-enter-active">d</div>` +
`<div class="test group-enter">d</div>` +
`<div class="test">b</div>` +
`<div class="test group-move">a</div>` +
`<div class="test group-leave group-leave-active group-move">c</div>` +
`<div class="test group-leave group-move">c</div>` +
`</span>`
)
}).thenWaitFor(nextFrame).then(() => {
@ -273,7 +282,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-leave-active group-move">c</div>` +
`<div class="test group-move group-leave-active">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 v-leave-active">one</div>' +
'<div class="test v-enter v-enter-active">two</div>'
'<div class="test v-leave">one</div>' +
'<div class="test v-enter">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 test-leave-active">one</div><!---->'
'<div class="test test-leave">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 test-enter-active">two</div>'
'<div class="test test-enter">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 test-leave-active">one</div><!---->'
'<div class="test test-leave">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 test-enter-active">two</div>'
'<div class="test test-enter">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 test-enter-active">two</div>'
'<div class="test test-enter">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 test-leave-active">one</div>' +
'<div class="test test-leave">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 test-enter-active">two</div>'
'<div class="test test-enter">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 test-enter-active">one</div>'
'<div class="test test-enter">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 test-leave-active">two</div>' +
'<div class="test test-leave">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 v-leave-active">one</div>' +
'<div class="test v-enter v-enter-active">two</div>'
'<div class="test v-leave">one</div>' +
'<div class="test v-enter">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 test-leave-active">one</div><!---->'
'<div class="test test-leave">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 test-enter-active">two</div>'
'<div class="test test-enter">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 test-enter-active">two</div>'
'<div class="test test-enter">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 test-leave-active">one</div>' +
'<div class="test test-leave">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 v-leave-active')
expect(vm.$el.children[0].className).toBe('test v-leave')
}).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 v-enter-active')
expect(vm.$el.children[0].className).toBe('test v-enter')
}).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 test-leave-active')
expect(vm.$el.children[0].className).toBe('test test-leave')
}).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 test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).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 byebye active')
expect(vm.$el.children[0].className).toBe('test bye')
}).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 hello-active')
expect(vm.$el.children[0].className).toBe('test hello')
}).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 test-leave-active')
expect(vm.$el.children[0].className).toBe('test test-leave')
}).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 changed-enter-active')
expect(vm.$el.children[0].className).toBe('test changed-enter')
}).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 byebye active')
expect(vm.$el.children[0].className).toBe('test bye')
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 hello-active')
expect(vm.$el.children[0].className).toBe('test hello')
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 test-leave-active')
expect(vm.$el.children[0].className).toBe('test test-leave')
}).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 test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).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 test-leave-active')
expect(vm.$el.children[0].className).toBe('test test-leave')
}).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 test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).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 test-leave-active')
expect(vm.$el.children[0].className).toBe('test test-leave')
}).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 test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).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 nope-leave-active">foo</div><!---->')
expect(vm.$el.innerHTML).toBe('<div class="nope-leave">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 nope-enter-active">foo</div>')
expect(vm.$el.innerHTML).toBe('<div class="nope-enter">foo</div>')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toMatch(/<div( class="")?>foo<\/div>/)
}).then(done)
@ -455,12 +455,14 @@ if (!isIE9) {
expect(vm.$el.innerHTML).toBe('<!---->')
vm.ok = true
waitForUpdate(() => {
expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration / 2).then(() => {
vm.ok = false
}).then(() => {
expect(spy).toHaveBeenCalled()
expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')
expect(vm.$el.children[0].className).toBe('test test-leave')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-leave-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -487,13 +489,15 @@ 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 test-leave-active')
expect(vm.$el.children[0].className).toBe('test test-leave')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test 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 test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -519,7 +523,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 test-leave-active')
expect(vm.$el.children[0].className).toBe('test test-leave')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-leave-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -527,7 +531,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 test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -555,7 +559,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 test-leave-active')
expect(vm.$el.children[0].className).toBe('test test-leave')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-leave-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -563,7 +567,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 test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -590,14 +594,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 test-leave-active')
expect(vm.$el.children[0].className).toBe('test test-leave')
}).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 test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -621,14 +625,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 test-anim-leave-active')
expect(vm.$el.children[0].className).toBe('test-anim-leave')
}).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 test-anim-enter-active')
expect(vm.$el.children[0].className).toBe('test-anim-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test-anim-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -652,7 +656,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 test-anim-long-leave-active')
expect(vm.$el.children[0].className).toBe('test test-anim-long-leave')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-anim-long-leave-active')
}).thenWaitFor(duration + 5).then(() => {
@ -662,7 +666,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 test-anim-long-enter-active')
expect(vm.$el.children[0].className).toBe('test test-anim-long-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-anim-long-enter-active')
}).thenWaitFor(duration + 5).then(() => {
@ -688,7 +692,7 @@ if (!isIE9) {
}).$mount(el)
waitForUpdate(() => {
expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active')
expect(vm.$el.children[0].className).toBe('test test-appear')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-appear-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -709,7 +713,7 @@ if (!isIE9) {
}).$mount(el)
waitForUpdate(() => {
expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -733,7 +737,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 v-leave-active')
expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -742,7 +746,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 v-enter-active')
expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -775,14 +779,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 v-leave-active')
expect(vm.$el.children[0].className).toBe('test v-leave')
}).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 v-enter-active')
expect(vm.$el.children[0].className).toBe('test v-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test v-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -813,14 +817,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 v-leave-active')
expect(vm.$el.children[0].className).toBe('test v-leave')
}).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 v-enter-active')
expect(vm.$el.children[0].className).toBe('test v-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test v-enter-active')
}).thenWaitFor(duration + buffer).then(() => {
@ -847,14 +851,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 test-leave-active')
expect(vm.$el.children[0].className).toBe('test test-leave')
}).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 test-enter-active')
expect(vm.$el.children[0].className).toBe('test test-enter')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-enter-active')
}).thenWaitFor(duration + buffer).then(() => {