test/vue
1
0
Fork 0
mirror of https://gitee.com/vuejs/vue.git synced 2024-12-04 21:17:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix transition active class application timing to avoid initial flash

Browse Source
This commit is contained in:
Evan You 2016-06-22 22:01:11 -04:00
parent 3fe127b05a
commit ebd8d5fd59
4 changed files with 60 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,14 +94,12 @@ export function enter (vnode: VNodeWithData) {
beforeEnterHook && beforeEnterHook(el)
if (expectsCSS) {
addTransitionClass(el, startClass)
addTransitionClass(el, activeClass)
nextFrame(() => {
removeTransitionClass(el, startClass)
if (!cb.cancelled) {
addTransitionClass(el, activeClass)
if (!userWantsControl) {
if (!cb.cancelled && !userWantsControl) {
whenTransitionEnds(el, cb)
}
}
})
}
enterHook && enterHook(el, cb)
@ -161,14 +159,12 @@ export function leave (vnode: VNodeWithData, rm: Function) {
beforeLeave && beforeLeave(el)
if (expectsCSS) {
addTransitionClass(el, leaveClass)
addTransitionClass(el, leaveActiveClass)
nextFrame(() => {
removeTransitionClass(el, leaveClass)
if (!cb.cancelled) {
addTransitionClass(el, leaveActiveClass)
if (!userWantsControl) {
if (!cb.cancelled && !userWantsControl) {
whenTransitionEnds(el, cb)
}
}
})
}
onLeave && onLeave(el, cb)

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

@ -107,7 +107,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])
@ -119,7 +119,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])
@ -137,7 +137,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])
@ -149,7 +149,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])
@ -197,7 +197,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])
@ -213,7 +213,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(() => {
@ -232,7 +232,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])
@ -248,7 +248,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(() => {

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

@ -33,8 +33,8 @@ if (!isIE9) {
vm.view = 'two'
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test v-enter">two</div>' +
'<div class="test v-leave">one</div>'
'<div class="test v-enter v-enter-active">two</div>' +
'<div class="test v-leave v-leave-active">one</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -73,7 +73,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(
@ -83,7 +83,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(
@ -122,7 +122,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(
@ -136,7 +136,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(() => {
@ -166,8 +166,8 @@ if (!isIE9) {
vm.view = 'two'
waitForUpdate(() => {
expect(vm.$el.innerHTML).toBe(
'<div class="test v-enter">two</div>' +
'<div class="test v-leave">one</div>'
'<div class="test v-enter v-enter-active">two</div>' +
'<div class="test v-leave v-leave-active">one</div>'
)
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toBe(
@ -205,7 +205,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(
@ -215,7 +215,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(
@ -253,7 +253,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(
@ -267,7 +267,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(() => {

68
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 + 10).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 + 10).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 + 10).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 + 10).then(() => {
@ -72,7 +72,7 @@ if (!isIE9) {
enterClass: 'hello',
enterActiveClass: 'hello-active',
leaveClass: 'bye',
leaveActiveClass: 'bye active' // testing multi classes
leaveActiveClass: 'byebye active' // testing multi classes
}
}
}).$mount(el)
@ -81,14 +81,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 bye active')
expect(vm.$el.children[0].className).toBe('test byebye active')
}).thenWaitFor(duration + 10).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 + 10).then(() => {
@ -109,7 +109,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 + 10).then(() => {
@ -117,7 +117,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 + 10).then(() => {
@ -134,7 +134,7 @@ if (!isIE9) {
enterClass: 'hello',
enterActiveClass: 'hello-active',
leaveClass: 'bye',
leaveActiveClass: 'bye active'
leaveActiveClass: 'byebye active'
}">foo</div></div>`,
data: { ok: true },
transitions: {
@ -149,15 +149,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 bye')
expect(vm.$el.children[0].className).toBe('test bye byebye active')
expect(onLeave).toHaveBeenCalled()
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test bye active')
expect(vm.$el.children[0].className).toBe('test byebye active')
}).thenWaitFor(duration + 10).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')
expect(onEnter).toHaveBeenCalled()
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test hello-active')
@ -200,7 +200,7 @@ if (!isIE9) {
waitForUpdate(() => {
expect(beforeLeaveSpy).toHaveBeenCalled()
expect(hooks.onLeave).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(hooks.afterLeave).not.toHaveBeenCalled()
expect(vm.$el.children[0].className).toBe('test test-leave-active')
@ -211,7 +211,7 @@ if (!isIE9) {
}).then(() => {
expect(beforeEnterSpy).toHaveBeenCalled()
expect(hooks.onEnter).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(hooks.afterEnter).not.toHaveBeenCalled()
expect(vm.$el.children[0].className).toBe('test test-enter-active')
@ -239,7 +239,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 + 10).then(() => {
@ -250,7 +250,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 + 10).then(() => {
@ -304,13 +304,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)
@ -331,12 +331,12 @@ if (!isIE9) {
expect(vm.$el.innerHTML).toBe('')
vm.ok = true
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(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 + 10).then(() => {
@ -355,7 +355,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 + 10).then(() => {
@ -363,7 +363,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 + 10).then(() => {
@ -386,14 +386,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 + 10).then(() => {
@ -411,14 +411,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-anim-leave')
expect(vm.$el.children[0].className).toBe('test test-anim-leave test-anim-leave-active')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-anim-leave-active')
}).thenWaitFor(duration + 10).then(() => {
expect(vm.$el.children.length).toBe(0)
vm.ok = true
}).then(() => {
expect(vm.$el.children[0].className).toBe('test test-anim-enter')
expect(vm.$el.children[0].className).toBe('test test-anim-enter test-anim-enter-active')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.children[0].className).toBe('test test-anim-enter-active')
}).thenWaitFor(duration + 10).then(() => {
@ -444,7 +444,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 + 10).then(() => {
@ -465,7 +465,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 + 10).then(() => {
@ -483,14 +483,14 @@ 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 + 10).then(() => {
expect(vm.$el.childNodes.length).toBe(0)
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 + 10).then(() => {
@ -513,14 +513,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 + 10).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 + 10).then(() => {