diff --git a/packages/compiler-vapor/src/transforms/vIf.ts b/packages/compiler-vapor/src/transforms/vIf.ts index ad527a899..8454099ee 100644 --- a/packages/compiler-vapor/src/transforms/vIf.ts +++ b/packages/compiler-vapor/src/transforms/vIf.ts @@ -124,7 +124,7 @@ export function createIfBranch( const exitBlock = context.enterBlock(branch) context.reference() // generate key for branch result when it's in transition - // the key will be used to cache node at runtime + // the key will be used to track node leaving at runtime branch.dynamic.needsKey = isInTransition(context) return [branch, exitBlock] } diff --git a/packages/compiler-vapor/src/transforms/vSlot.ts b/packages/compiler-vapor/src/transforms/vSlot.ts index 66b24b0a9..9a65e6f1b 100644 --- a/packages/compiler-vapor/src/transforms/vSlot.ts +++ b/packages/compiler-vapor/src/transforms/vSlot.ts @@ -253,8 +253,10 @@ function createSlotBlock( ): [SlotBlockIRNode, () => void] { const block: SlotBlockIRNode = newBlock(slotNode) block.props = dir && dir.exp - block.key = key - if (key) block.dynamic.needsKey = true + if (key) { + block.key = key + block.dynamic.needsKey = true + } const exitBlock = context.enterBlock(block) return [block, exitBlock] } diff --git a/packages/compiler-vapor/src/utils.ts b/packages/compiler-vapor/src/utils.ts index 2d5ba72b3..d2c7eca3b 100644 --- a/packages/compiler-vapor/src/utils.ts +++ b/packages/compiler-vapor/src/utils.ts @@ -94,11 +94,7 @@ export function isInTransition( context: TransformContext, ): boolean { const parentNode = context.parent && context.parent.node - return !!( - parentNode && - (isTransitionNode(parentNode as ElementNode) || - isTransitionGroupNode(parentNode as ElementNode)) - ) + return !!(parentNode && isTransitionNode(parentNode as ElementNode)) } export function isTransitionNode(node: ElementNode): boolean { diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts index 477c545ad..fde421483 100644 --- a/packages/runtime-core/src/components/BaseTransition.ts +++ b/packages/runtime-core/src/components/BaseTransition.ts @@ -376,6 +376,7 @@ export function resolveTransitionHooks( return baseResolveTransitionHooks(context, props, state, instance) } +// shared between vdom and vapor export function baseResolveTransitionHooks( context: TransitionHooksContext, props: BaseTransitionProps, diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index 5b1a50846..744338b3f 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -2625,6 +2625,7 @@ export function invalidateMount(hooks: LifecycleHook | undefined): void { } } +// shared between vdom and vapor export function performTransitionEnter( el: RendererElement, transition: TransitionHooks, @@ -2640,6 +2641,7 @@ export function performTransitionEnter( } } +// shared between vdom and vapor export function performTransitionLeave( el: RendererElement, transition: TransitionHooks, diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts index 4f4993b5c..8e38dbf0f 100644 --- a/packages/runtime-dom/src/components/TransitionGroup.ts +++ b/packages/runtime-dom/src/components/TransitionGroup.ts @@ -189,6 +189,7 @@ function applyTranslation(c: VNode): VNode | undefined { } } +// shared between vdom and vapor export function baseApplyTranslation( oldPos: DOMRect, newPos: DOMRect, @@ -205,6 +206,7 @@ export function baseApplyTranslation( return false } +// shared between vdom and vapor export function hasCSSTransform( el: ElementWithTransition, root: Node, @@ -233,6 +235,7 @@ export function hasCSSTransform( return hasTransform } +// shared between vdom and vapor export const handleMovedChildren = ( el: ElementWithTransition, moveClass: string, diff --git a/packages/runtime-vapor/src/apiCreateFor.ts b/packages/runtime-vapor/src/apiCreateFor.ts index 1e4be0b51..f6b5d2bf8 100644 --- a/packages/runtime-vapor/src/apiCreateFor.ts +++ b/packages/runtime-vapor/src/apiCreateFor.ts @@ -316,6 +316,7 @@ export const createFor = ( getKey && getKey(item, key, index), )) + // apply transition for new nodes if (frag.$transition) { applyTransitionEnterHooks(block.nodes, frag.$transition) } diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts index 26c0d8ca3..65f7c4f35 100644 --- a/packages/runtime-vapor/src/block.ts +++ b/packages/runtime-vapor/src/block.ts @@ -157,7 +157,7 @@ export function insert( anchor = anchor === 0 ? parent.firstChild : anchor if (block instanceof Node) { if (!isHydrating) { - // don't apply transition on text or comment nodes + // only apply transition on Element nodes if ( block instanceof Element && (block as TransitionBlock).$transition && diff --git a/packages/runtime-vapor/src/components/TransitionGroup.ts b/packages/runtime-vapor/src/components/TransitionGroup.ts index 35d39c664..93bd202ce 100644 --- a/packages/runtime-vapor/src/components/TransitionGroup.ts +++ b/packages/runtime-vapor/src/components/TransitionGroup.ts @@ -71,7 +71,10 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({ // inserted into the correct position immediately. this prevents // `recordPosition` from getting incorrect positions in `onUpdated` hook.disabledOnMoving = true - positionMap.set(child, getEl(child).getBoundingClientRect()) + positionMap.set( + child, + getTransitionElement(child).getBoundingClientRect(), + ) } } } @@ -84,7 +87,7 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({ const moveClass = props.moveClass || `${props.name || 'v'}-move` - const firstChild = findFirstChild(prevChildren) + const firstChild = getFirstConnectedChild(prevChildren) if ( !firstChild || !hasCSSTransform( @@ -107,7 +110,10 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({ forceReflow() movedChildren.forEach(c => - handleMovedChildren(getEl(c) as ElementWithTransition, moveClass), + handleMovedChildren( + getTransitionElement(c) as ElementWithTransition, + moveClass, + ), ) }) @@ -180,12 +186,12 @@ function isValidTransitionBlock(block: Block): boolean { return !!(block instanceof Element || (isFragment(block) && block.insert)) } -function getEl(c: TransitionBlock): Element { - return (isFragment(c) ? c.nodes : c) as Element +function getTransitionElement(c: TransitionBlock): Element { + return (isFragment(c) ? (c.nodes as Element[])[0] : c) as Element } function recordPosition(c: TransitionBlock) { - newPositionMap.set(c, getEl(c).getBoundingClientRect()) + newPositionMap.set(c, getTransitionElement(c).getBoundingClientRect()) } function applyTranslation(c: TransitionBlock): TransitionBlock | undefined { @@ -193,17 +199,19 @@ function applyTranslation(c: TransitionBlock): TransitionBlock | undefined { baseApplyTranslation( positionMap.get(c)!, newPositionMap.get(c)!, - getEl(c) as ElementWithTransition, + getTransitionElement(c) as ElementWithTransition, ) ) { return c } } -function findFirstChild(children: TransitionBlock[]): Element | undefined { +function getFirstConnectedChild( + children: TransitionBlock[], +): Element | undefined { for (let i = 0; i < children.length; i++) { const child = children[i] - const el = getEl(child) + const el = getTransitionElement(child) if (el.isConnected) return el } } diff --git a/packages/runtime-vapor/src/vdomInterop.ts b/packages/runtime-vapor/src/vdomInterop.ts index b9bce9d6f..78d92affc 100644 --- a/packages/runtime-vapor/src/vdomInterop.ts +++ b/packages/runtime-vapor/src/vdomInterop.ts @@ -229,7 +229,8 @@ function createVDOMComponent( parentInstance as any, ) } - frag.nodes = vnode.el as Node + + frag.nodes = [vnode.el as Node] simpleSetCurrentInstance(prev) }