From 8957eaa3197cc9de3caffb511a094cd08660fe75 Mon Sep 17 00:00:00 2001 From: daiwei Date: Fri, 28 Feb 2025 16:19:03 +0800 Subject: [PATCH] wip: handle in-out mode --- packages/runtime-vapor/src/block.ts | 10 +++++-- .../src/components/Transition.ts | 30 +++++++++++++++---- 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts index 383c4e8e9f..e0748fe879 100644 --- a/packages/runtime-vapor/src/block.ts +++ b/packages/runtime-vapor/src/block.ts @@ -23,6 +23,7 @@ export type Block = ( TransitionBlock export type TransitionBlock = { + key?: any transition?: TransitionHooks applyLeavingHooks?: ( block: Block, @@ -91,11 +92,14 @@ export class DynamicFragment extends VaporFragment { // teardown previous branch if (this.scope) { this.scope.stop() - if (this.transition && this.transition.mode) { + const mode = this.transition && this.transition.mode + if (mode) { const transition = this.applyLeavingHooks!(this.nodes, renderNewBranch) parent && remove(this.nodes, parent, transition) - resetTracking() - return + if (mode === 'out-in') { + resetTracking() + return + } } else { parent && remove(this.nodes, parent, this.transition) } diff --git a/packages/runtime-vapor/src/components/Transition.ts b/packages/runtime-vapor/src/components/Transition.ts index 9b9410234b..b203db4669 100644 --- a/packages/runtime-vapor/src/components/Transition.ts +++ b/packages/runtime-vapor/src/components/Transition.ts @@ -41,14 +41,17 @@ export const vaporTransitionImpl: VaporTransitionInterface = { const { mode } = props // TODO check mode - child.applyLeavingHooks = (block: Block, afterLeaveCb: () => void) => { + child.applyLeavingHooks = ( + leavingBlock: Block, + afterLeaveCb: () => void, + ) => { let leavingHooks = resolveTransitionHooks( - block as any, + leavingBlock as any, props, state, currentInstance!, ) - setTransitionHooks(block, leavingHooks) + setTransitionHooks(leavingBlock, leavingHooks) if (mode === 'out-in') { state.isLeaving = true @@ -58,8 +61,23 @@ export const vaporTransitionImpl: VaporTransitionInterface = { delete leavingHooks.afterLeave } } else if (mode === 'in-out') { - leavingHooks.delayLeave = (block: Block, earlyRemove, delayedLeave) => { - // TODO delay leave + leavingHooks.delayLeave = ( + block: TransitionElement, + earlyRemove, + delayedLeave, + ) => { + const leavingNodeCache = getLeavingNodesForBlock(state, leavingBlock) + leavingNodeCache[String(leavingBlock.key)] = leavingBlock + // early removal callback + block[leaveCbKey] = () => { + earlyRemove() + block[leaveCbKey] = undefined + delete enterHooks.delayedLeave + } + enterHooks.delayedLeave = () => { + delayedLeave() + delete enterHooks.delayedLeave + } } } return leavingHooks @@ -70,7 +88,7 @@ export const vaporTransitionImpl: VaporTransitionInterface = { } function resolveTransitionHooks( - block: Block & { key: string }, + block: Block, props: TransitionProps, state: TransitionState, instance: GenericComponentInstance, -- 2.47.2