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

fix(transition): fix css:false with hooks with no explicit done callback

Browse Source 
close #1149
This commit is contained in:
Evan You 2020-06-25 17:40:49 -04:00
parent 2ff8dcab0a
commit 9edbc27f45
2 changed files with 50 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/runtime-core/src/components/BaseTransition.ts
View File

@ -343,6 +343,9 @@ export function resolveTransitionHooks(
})
if (hook) {
hook(el, done)
if (hook.length <= 1) {
done()
}
} else {
done()
}
@ -358,7 +361,7 @@ export function resolveTransitionHooks(
}
callHook(onBeforeLeave, [el])
let called = false
const afterLeave = (el._leaveCb = (cancelled?) => {
const done = (el._leaveCb = (cancelled?) => {
if (called) return
called = true
remove()
@ -374,9 +377,12 @@ export function resolveTransitionHooks(
})
leavingVNodesCache[key] = vnode
if (onLeave) {
onLeave(el, afterLeave)
onLeave(el, done)
if (onLeave.length <= 1) {
done()
}
} else {
afterLeave()
done()
}
}
}

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

@ -11,7 +11,8 @@ describe('e2e: Transition', () => {
classList,
isVisible,
timeout,
nextFrame
nextFrame,
click
} = setupPuppeteer()
const baseUrl = `file://${path.resolve(__dirname, './transition.html')}`
@ -665,18 +666,32 @@ describe('e2e: Transition', () => {
E2E_TIMEOUT
)
// fixme
test(
'css: false',
async () => {
const onLeaveSpy = jest.fn()
const onBeforeEnterSpy = jest.fn()
const onEnterSpy = jest.fn()
const onAfterEnterSpy = jest.fn()
const onBeforeLeaveSpy = jest.fn()
const onLeaveSpy = jest.fn()
const onAfterLeaveSpy = jest.fn()
await page().exposeFunction('onLeaveSpy', onLeaveSpy)
await page().exposeFunction('onBeforeEnterSpy', onBeforeEnterSpy)
await page().exposeFunction('onEnterSpy', onEnterSpy)
await page().exposeFunction('onAfterEnterSpy', onAfterEnterSpy)
await page().exposeFunction('onBeforeLeaveSpy', onBeforeLeaveSpy)
await page().exposeFunction('onLeaveSpy', onLeaveSpy)
await page().exposeFunction('onAfterLeaveSpy', onAfterLeaveSpy)
await page().evaluate(() => {
const { onLeaveSpy, onEnterSpy } = window as any
const {
onBeforeEnterSpy,
onEnterSpy,
onAfterEnterSpy,
onBeforeLeaveSpy,
onLeaveSpy,
onAfterLeaveSpy
} = window as any
const { createApp, ref } = (window as any).Vue
createApp({
template: `
@ -684,8 +699,12 @@ describe('e2e: Transition', () => {
<transition
:css="false"
name="test"
@before-enter="onBeforeEnterSpy"
@enter="onEnterSpy"
@leave="onLeaveSpy">
@after-enter="onAfterEnterSpy"
@before-leave="onBeforeLeaveSpy"
@leave="onLeaveSpy"
@after-leave="onAfterLeaveSpy">
<div v-if="toggle" class="test">content</div>
</transition>
</div>
@ -694,21 +713,32 @@ describe('e2e: Transition', () => {
setup: () => {
const toggle = ref(true)
const click = () => (toggle.value = !toggle.value)
return { toggle, click, onLeaveSpy, onEnterSpy }
return {
toggle,
click,
onBeforeEnterSpy,
onEnterSpy,
onAfterEnterSpy,
onBeforeLeaveSpy,
onLeaveSpy,
onAfterLeaveSpy
}
}
}).mount('#app')
})
expect(await html('#container')).toBe('<div class="test">content</div>')
// leave
await classWhenTransitionStart()
await click('#toggleBtn')
expect(onBeforeLeaveSpy).toBeCalled()
expect(onLeaveSpy).toBeCalled()
expect(await html('#container')).toBe(
'<div class="test">content</div><!--v-if-->'
)
expect(onAfterLeaveSpy).toBeCalled()
expect(await html('#container')).toBe('<!--v-if-->')
// enter
await classWhenTransitionStart()
expect(onBeforeEnterSpy).toBeCalled()
expect(onEnterSpy).toBeCalled()
expect(onAfterEnterSpy).toBeCalled()
expect(await html('#container')).toBe('<div class="test">content</div>')
},
E2E_TIMEOUT