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

fix(transition): ensure styles from *-leave-active trigger transition (#2716)

Browse Source 
fix #2712
This commit is contained in:
luwuer 2020-12-03 23:37:47 +08:00 committed by GitHub
parent d067fb2dbb
commit 3f8f9b67b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/runtime-dom/src/components/Transition.ts
View File

@ -157,13 +157,17 @@ export function resolveTransitionProps(
const resolve = () => finishLeave(el, done) const resolve = () => finishLeave(el, done)
addTransitionClass(el, leaveActiveClass) addTransitionClass(el, leaveActiveClass)
addTransitionClass(el, leaveFromClass) addTransitionClass(el, leaveFromClass)
// ref #2531, #2593
// disabling the transition before nextFrame ensures styles from
// *-leave-from and *-enter-from classes are applied instantly before
// the transition starts. This is applied for enter transition as well
// so that it accounts for `visibility: hidden` cases.
const cachedTransition = (el as HTMLElement).style.transitionProperty const cachedTransition = (el as HTMLElement).style.transitionProperty
;(el as HTMLElement).style.transitionProperty = 'none' requestAnimationFrame(() => {
// ref #2531, #2593
// disabling the transition before nextFrame ensures styles from
// *-leave-from classes are applied instantly before the transition starts.
// ref #2712
// do this in an rAF to ensure styles from *-leave-active can trigger
// transition on the first frame when el has `transition` property itself.
;(el as HTMLElement).style.transitionProperty = 'none'
})
nextFrame(() => { nextFrame(() => {
;(el as HTMLElement).style.transitionProperty = cachedTransition ;(el as HTMLElement).style.transitionProperty = cachedTransition
removeTransitionClass(el, leaveFromClass) removeTransitionClass(el, leaveFromClass)

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

@ -8,7 +8,6 @@ describe('e2e: TransitionGroup', () => {
const duration = 50 const duration = 50
const buffer = 5 const buffer = 5
const transitionDisableProp = `style="transition-property: none;"`
const htmlWhenTransitionStart = () => const htmlWhenTransitionStart = () =>
page().evaluate(() => { page().evaluate(() => {
@ -107,9 +106,9 @@ describe('e2e: TransitionGroup', () => {
) )
expect(await htmlWhenTransitionStart()).toBe( expect(await htmlWhenTransitionStart()).toBe(
`<div class="test test-leave-active test-leave-from" ${transitionDisableProp}>a</div>` + `<div class="test test-leave-active test-leave-from">a</div>` +
`<div class="test">b</div>` + `<div class="test">b</div>` +
`<div class="test test-leave-active test-leave-from" ${transitionDisableProp}>c</div>` `<div class="test test-leave-active test-leave-from">c</div>`
) )
await nextFrame() await nextFrame()
expect(await html('#container')).toBe( expect(await html('#container')).toBe(
@ -151,7 +150,7 @@ describe('e2e: TransitionGroup', () => {
) )
expect(await htmlWhenTransitionStart()).toBe( expect(await htmlWhenTransitionStart()).toBe(
`<div class="test test-leave-active test-leave-from" ${transitionDisableProp}>a</div>` + `<div class="test test-leave-active test-leave-from">a</div>` +
`<div class="test">b</div>` + `<div class="test">b</div>` +
`<div class="test">c</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">d</div>`
@ -279,7 +278,7 @@ describe('e2e: TransitionGroup', () => {
`<div class="test group-enter-active group-enter-from">d</div>` + `<div class="test group-enter-active group-enter-from">d</div>` +
`<div class="test">b</div>` + `<div class="test">b</div>` +
`<div class="test group-move" style="">a</div>` + `<div class="test group-move" style="">a</div>` +
`<div class="test group-leave-active group-leave-from group-move" ${transitionDisableProp}>c</div>` `<div class="test group-leave-active group-leave-from group-move" style="">c</div>`
) )
await nextFrame() await nextFrame()
expect(await html('#container')).toBe( expect(await html('#container')).toBe(
@ -462,7 +461,7 @@ describe('e2e: TransitionGroup', () => {
// enter + leave // enter + leave
expect(await htmlWhenTransitionStart()).toBe( expect(await htmlWhenTransitionStart()).toBe(
`<div class="test test-leave-active test-leave-from" ${transitionDisableProp}>a</div>` + `<div class="test test-leave-active test-leave-from">a</div>` +
`<div class="test">b</div>` + `<div class="test">b</div>` +
`<div class="test">c</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">d</div>`