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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -143,33 +143,23 @@ export function resolveTransitionProps(
return extend(baseProps, { return extend(baseProps, {
onBeforeEnter(el) { onBeforeEnter(el) {
onBeforeEnter && onBeforeEnter(el) onBeforeEnter && onBeforeEnter(el)
addTransitionClass(el, enterActiveClass)
addTransitionClass(el, enterFromClass) addTransitionClass(el, enterFromClass)
addTransitionClass(el, enterActiveClass)
}, },
onBeforeAppear(el) { onBeforeAppear(el) {
onBeforeAppear && onBeforeAppear(el) onBeforeAppear && onBeforeAppear(el)
addTransitionClass(el, appearActiveClass)
addTransitionClass(el, appearFromClass) addTransitionClass(el, appearFromClass)
addTransitionClass(el, appearActiveClass)
}, },
onEnter: makeEnterHook(false), onEnter: makeEnterHook(false),
onAppear: makeEnterHook(true), onAppear: makeEnterHook(true),
onLeave(el, done) { onLeave(el, done) {
const resolve = () => finishLeave(el, done) const resolve = () => finishLeave(el, done)
addTransitionClass(el, leaveActiveClass)
addTransitionClass(el, leaveFromClass) addTransitionClass(el, leaveFromClass)
// force reflow so *-leave-from classes immediately take effect (#2593)
const cachedTransition = (el as HTMLElement).style.transitionProperty forceReflow()
requestAnimationFrame(() => { addTransitionClass(el, leaveActiveClass)
// 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
removeTransitionClass(el, leaveFromClass) removeTransitionClass(el, leaveFromClass)
addTransitionClass(el, leaveToClass) addTransitionClass(el, leaveToClass)
if (!(onLeave && onLeave.length > 1)) { if (!(onLeave && onLeave.length > 1)) {
@ -370,3 +360,8 @@ function getTimeout(delays: string[], durations: string[]): number {
function toMs(s: string): number { function toMs(s: string): number {
return Number(s.slice(0, -1).replace(',', '.')) * 1000 return Number(s.slice(0, -1).replace(',', '.')) * 1000
} }
// synchronously force layout to put elements into a certain state
export function forceReflow() {
return document.body.offsetHeight
}

8
packages/runtime-dom/src/components/TransitionGroup.ts
View File

@ -5,7 +5,8 @@ import {
ElementWithTransition, ElementWithTransition,
getTransitionInfo, getTransitionInfo,
resolveTransitionProps, resolveTransitionProps,
TransitionPropsValidators TransitionPropsValidators,
forceReflow
} from './Transition' } from './Transition'
import { import {
Fragment, Fragment,
@ -172,11 +173,6 @@ function applyTranslation(c: VNode): VNode | undefined {
} }
} }
// this is put in a dedicated function to avoid the line from being treeshaken
function forceReflow() {
return document.body.offsetHeight
}
function hasCSSTransform( function hasCSSTransform(
el: ElementWithTransition, el: ElementWithTransition,
root: Node, root: Node,

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

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

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

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