fix(transition): ensure manual style manipulation in transition leave hooks work
ref #2720
This commit is contained in:
Evan You
parent
3016b811b8
commit
cbaa380506
@ -143,33 +143,23 @@ export function resolveTransitionProps(
|
||||
return extend(baseProps, {
|
||||
onBeforeEnter(el) {
|
||||
onBeforeEnter && onBeforeEnter(el)
|
||||
addTransitionClass(el, enterActiveClass)
|
||||
addTransitionClass(el, enterFromClass)
|
||||
addTransitionClass(el, enterActiveClass)
|
||||
},
|
||||
onBeforeAppear(el) {
|
||||
onBeforeAppear && onBeforeAppear(el)
|
||||
addTransitionClass(el, appearActiveClass)
|
||||
addTransitionClass(el, appearFromClass)
|
||||
addTransitionClass(el, appearActiveClass)
|
||||
},
|
||||
onEnter: makeEnterHook(false),
|
||||
onAppear: makeEnterHook(true),
|
||||
onLeave(el, done) {
|
||||
const resolve = () => finishLeave(el, done)
|
||||
addTransitionClass(el, leaveActiveClass)
|
||||
addTransitionClass(el, leaveFromClass)
|
||||
|
||||
const cachedTransition = (el as HTMLElement).style.transitionProperty
|
||||
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'
|
||||
})
|
||||
// force reflow so *-leave-from classes immediately take effect (#2593)
|
||||
forceReflow()
|
||||
addTransitionClass(el, leaveActiveClass)
|
||||
nextFrame(() => {
|
||||
;(el as HTMLElement).style.transitionProperty = cachedTransition
|
||||
removeTransitionClass(el, leaveFromClass)
|
||||
addTransitionClass(el, leaveToClass)
|
||||
if (!(onLeave && onLeave.length > 1)) {
|
||||
@ -370,3 +360,8 @@ function getTimeout(delays: string[], durations: string[]): number {
|
||||
function toMs(s: string): number {
|
||||
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
|
||||
}
|
||||
|
||||
@ -5,7 +5,8 @@ import {
|
||||
ElementWithTransition,
|
||||
getTransitionInfo,
|
||||
resolveTransitionProps,
|
||||
TransitionPropsValidators
|
||||
TransitionPropsValidators,
|
||||
forceReflow
|
||||
} from './Transition'
|
||||
import {
|
||||
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(
|
||||
el: ElementWithTransition,
|
||||
root: Node,
|
||||
|
||||
@ -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([
|
||||
|
||||
@ -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>`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user