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

44
packages/vue/__tests__/TransitionGroup.spec.ts
View File

@@ -55,8 +55,8 @@ describe('e2e: TransitionGroup', () => {
`<div class="test">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test test-enter-active test-enter-from">d</div>` +
`<div class="test test-enter-active test-enter-from">e</div>`
`<div class="test test-enter-from test-enter-active">d</div>` +
`<div class="test test-enter-from test-enter-active">e</div>`
)
await nextFrame()
expect(await html('#container')).toBe(
@@ -106,15 +106,15 @@ describe('e2e: TransitionGroup', () => {
)
expect(await htmlWhenTransitionStart()).toBe(
`<div class="test test-leave-active test-leave-from">a</div>` +
`<div class="test test-leave-from test-leave-active">a</div>` +
`<div class="test">b</div>` +
`<div class="test test-leave-active test-leave-from">c</div>`
`<div class="test test-leave-from test-leave-active">c</div>`
)
await nextFrame()
expect(await html('#container')).toBe(
`<div class="test test-leave-active test-leave-to" style="">a</div>` +
`<div class="test test-leave-active test-leave-to">a</div>` +
`<div class="test">b</div>` +
`<div class="test test-leave-active test-leave-to" style="">c</div>`
`<div class="test test-leave-active test-leave-to">c</div>`
)
await transitionFinish()
expect(await html('#container')).toBe(`<div class="test">b</div>`)
@@ -150,14 +150,14 @@ describe('e2e: TransitionGroup', () => {
)
expect(await htmlWhenTransitionStart()).toBe(
`<div class="test test-leave-active test-leave-from">a</div>` +
`<div class="test test-leave-from test-leave-active">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test test-enter-active test-enter-from">d</div>`
`<div class="test test-enter-from test-enter-active">d</div>`
)
await nextFrame()
expect(await html('#container')).toBe(
`<div class="test test-leave-active test-leave-to" style="">a</div>` +
`<div class="test test-leave-active test-leave-to">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test test-enter-active test-enter-to">d</div>`
@@ -202,9 +202,9 @@ describe('e2e: TransitionGroup', () => {
})
// appear
expect(appearHtml).toBe(
`<div class="test test-appear-active test-appear-from">a</div>` +
`<div class="test test-appear-active test-appear-from">b</div>` +
`<div class="test test-appear-active test-appear-from">c</div>`
`<div class="test test-appear-from test-appear-active">a</div>` +
`<div class="test test-appear-from test-appear-active">b</div>` +
`<div class="test test-appear-from test-appear-active">c</div>`
)
await nextFrame()
expect(await html('#container')).toBe(
@@ -224,8 +224,8 @@ describe('e2e: TransitionGroup', () => {
`<div class="test">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test test-enter-active test-enter-from">d</div>` +
`<div class="test test-enter-active test-enter-from">e</div>`
`<div class="test test-enter-from test-enter-active">d</div>` +
`<div class="test test-enter-from test-enter-active">e</div>`
)
await nextFrame()
expect(await html('#container')).toBe(
@@ -275,10 +275,10 @@ describe('e2e: TransitionGroup', () => {
)
expect(await htmlWhenTransitionStart()).toBe(
`<div class="test group-enter-active group-enter-from">d</div>` +
`<div class="test group-enter-from group-enter-active">d</div>` +
`<div class="test">b</div>` +
`<div class="test group-move" style="">a</div>` +
`<div class="test group-leave-active group-leave-from group-move" style="">c</div>`
`<div class="test group-leave-from group-leave-active group-move" style="">c</div>`
)
await nextFrame()
expect(await html('#container')).toBe(
@@ -440,9 +440,9 @@ describe('e2e: TransitionGroup', () => {
expect(onAppearSpy).toBeCalled()
expect(afterAppearSpy).not.toBeCalled()
expect(appearHtml).toBe(
`<div class="test test-appear-active test-appear-from">a</div>` +
`<div class="test test-appear-active test-appear-from">b</div>` +
`<div class="test test-appear-active test-appear-from">c</div>`
`<div class="test test-appear-from test-appear-active">a</div>` +
`<div class="test test-appear-from test-appear-active">b</div>` +
`<div class="test test-appear-from test-appear-active">c</div>`
)
await nextFrame()
expect(afterAppearSpy).not.toBeCalled()
@@ -461,10 +461,10 @@ describe('e2e: TransitionGroup', () => {
// enter + leave
expect(await htmlWhenTransitionStart()).toBe(
`<div class="test test-leave-active test-leave-from">a</div>` +
`<div class="test test-leave-from test-leave-active">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test test-enter-active test-enter-from">d</div>`
`<div class="test test-enter-from test-enter-active">d</div>`
)
expect(beforeLeaveSpy).toBeCalled()
expect(onLeaveSpy).toBeCalled()
@@ -474,7 +474,7 @@ describe('e2e: TransitionGroup', () => {
expect(afterEnterSpy).not.toBeCalled()
await nextFrame()
expect(await html('#container')).toBe(
`<div class="test test-leave-active test-leave-to" style="">a</div>` +
`<div class="test test-leave-active test-leave-to">a</div>` +
`<div class="test">b</div>` +
`<div class="test">c</div>` +
`<div class="test test-enter-active test-enter-to">d</div>`