theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(transition): ensure manual style manipulation in transition leave hooks work

Browse Source 
ref #2720
This commit is contained in:
Evan You
2020-12-03 16:10:22 -05:00
parent 3016b811b8
commit cbaa380506
4 changed files with 137 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
packages/vue/__tests__/Transition.spec.ts
View File

@@ -59,8 +59,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'v-leave-active',
'v-leave-from'
'v-leave-from',
'v-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -74,8 +74,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'v-enter-active',
'v-enter-from'
'v-enter-from',
'v-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -115,8 +115,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -130,8 +130,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -176,8 +176,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'bye-active',
'bye-from'
'bye-from',
'bye-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -191,8 +191,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'hello-active',
'hello-from'
'hello-from',
'hello-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -235,8 +235,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -253,8 +253,8 @@ describe('e2e: Transition', () => {
})
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'changed-enter-active',
'changed-enter-from'
'changed-enter-from',
'changed-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -332,8 +332,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
// todo test event with arguments. Note: not get dom, get object. '{}'
expect(beforeLeaveSpy).toBeCalled()
@@ -353,8 +353,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
expect(beforeEnterSpy).toBeCalled()
expect(onEnterSpy).toBeCalled()
@@ -408,8 +408,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -421,8 +421,8 @@ describe('e2e: Transition', () => {
// cancel (leave)
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
expect(enterCancelledSpy).toBeCalled()
await nextFrame()
@@ -466,8 +466,8 @@ describe('e2e: Transition', () => {
// appear
expect(appearClass).toStrictEqual([
'test',
'test-appear-active',
'test-appear-from'
'test-appear-from',
'test-appear-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -481,8 +481,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -496,8 +496,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -595,8 +595,8 @@ describe('e2e: Transition', () => {
// appear
expect(appearClass).toStrictEqual([
'test',
'test-appear-active',
'test-appear-from'
'test-appear-from',
'test-appear-active'
])
expect(beforeAppearSpy).toBeCalled()
expect(onAppearSpy).toBeCalled()
@@ -619,8 +619,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
expect(beforeLeaveSpy).toBeCalled()
expect(onLeaveSpy).toBeCalled()
@@ -639,8 +639,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
expect(beforeEnterSpy).toBeCalled()
expect(onEnterSpy).toBeCalled()
@@ -762,16 +762,16 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'noop-leave-active',
'noop-leave-from'
'noop-leave-from',
'noop-leave-active'
])
await nextFrame()
expect(await html('#container')).toBe('<!--v-if-->')
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'noop-enter-active',
'noop-enter-from'
'noop-enter-from',
'noop-enter-active'
])
await nextFrame()
expect(await html('#container')).toBe('<div class="">content</div>')
@@ -804,8 +804,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test-anim-leave-active',
'test-anim-leave-from'
'test-anim-leave-from',
'test-anim-leave-active'
])
await nextFrame()
expect(await classList('#container div')).toStrictEqual([
@@ -817,8 +817,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test-anim-enter-active',
'test-anim-enter-from'
'test-anim-enter-from',
'test-anim-enter-active'
])
await nextFrame()
expect(await classList('#container div')).toStrictEqual([
@@ -852,8 +852,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test-anim-long-leave-active',
'test-anim-long-leave-from'
'test-anim-long-leave-from',
'test-anim-long-leave-active'
])
await nextFrame()
expect(await classList('#container div')).toStrictEqual([
@@ -872,8 +872,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test-anim-long-enter-active',
'test-anim-long-enter-from'
'test-anim-long-enter-from',
'test-anim-long-enter-active'
])
await nextFrame()
expect(await classList('#container div')).toStrictEqual([
@@ -932,8 +932,8 @@ describe('e2e: Transition', () => {
// leave
expect(await svgTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -947,8 +947,8 @@ describe('e2e: Transition', () => {
// enter
expect(await svgTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -991,8 +991,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1006,8 +1006,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1063,8 +1063,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1082,8 +1082,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1149,8 +1149,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'v-leave-active',
'v-leave-from'
'v-leave-from',
'v-leave-active'
])
expect(onLeaveSpy).toBeCalledTimes(1)
await nextFrame()
@@ -1177,8 +1177,8 @@ describe('e2e: Transition', () => {
})
expect(enterClass).toStrictEqual([
'test',
'v-enter-active',
'v-enter-from'
'v-enter-from',
'v-enter-active'
])
expect(onEnterSpy).toBeCalledTimes(2)
await nextFrame()
@@ -1222,8 +1222,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'v-leave-active',
'v-leave-from'
'v-leave-from',
'v-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1237,8 +1237,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'v-enter-active',
'v-enter-from'
'v-enter-from',
'v-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1305,7 +1305,7 @@ describe('e2e: Transition', () => {
await classWhenTransitionStart()
await nextFrame()
expect(await html('#container')).toBe(
'<div class="test v-leave-active v-leave-to" style="">one</div>'
'<div class="test v-leave-active v-leave-to">one</div>'
)
await transitionFinish()
await nextFrame()
@@ -1347,8 +1347,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1362,8 +1362,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1443,8 +1443,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
expect(beforeLeaveSpy).toBeCalled()
expect(onLeaveSpy).toBeCalled()
@@ -1463,8 +1463,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
expect(beforeEnterSpy).toBeCalled()
expect(onEnterSpy).toBeCalled()
@@ -1516,8 +1516,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1529,8 +1529,8 @@ describe('e2e: Transition', () => {
// cancel (enter)
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
expect(onLeaveCancelledSpy).toBeCalled()
await nextFrame()
@@ -1578,8 +1578,8 @@ describe('e2e: Transition', () => {
// appear
expect(appearClass).toStrictEqual([
'test',
'test-appear-active',
'test-appear-from'
'test-appear-from',
'test-appear-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1593,8 +1593,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1608,8 +1608,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1670,8 +1670,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1685,8 +1685,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1726,8 +1726,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1741,8 +1741,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1782,8 +1782,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1797,8 +1797,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1841,8 +1841,8 @@ describe('e2e: Transition', () => {
// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-leave-active',
'test-leave-from'
'test-leave-from',
'test-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
@@ -1856,8 +1856,8 @@ describe('e2e: Transition', () => {
// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'test-enter-active',
'test-enter-from'
'test-enter-from',
'test-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([