diff --git a/src/compiler/compile/render-dom/wrappers/Element/index.ts b/src/compiler/compile/render-dom/wrappers/Element/index.ts index 7d458481f1..dce49dc8be 100644 --- a/src/compiler/compile/render-dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render-dom/wrappers/Element/index.ts @@ -763,6 +763,7 @@ export default class ElementWrapper extends Wrapper { if (!this.node.animation) return; const { component } = this.renderer; + const { outro } = this.node; const rect = block.get_unique_name('rect'); const stop_animation = block.get_unique_name('stop_animation'); @@ -777,6 +778,7 @@ export default class ElementWrapper extends Wrapper { block.builders.fix.add_block(deindent` @fix_position(${this.var}); ${stop_animation}(); + ${outro && `@add_transform(${this.var}, ${rect});`} `); const params = this.node.animation.expression ? this.node.animation.expression.render(block) : '{}'; diff --git a/src/runtime/internal/animations.ts b/src/runtime/internal/animations.ts index 5a055ba6d2..b0357647f5 100644 --- a/src/runtime/internal/animations.ts +++ b/src/runtime/internal/animations.ts @@ -86,13 +86,17 @@ export function fix_position(node: Element & ElementCSSInlineStyle) { node.style.position = 'absolute'; node.style.width = width; node.style.height = height; - const b = node.getBoundingClientRect(); + add_transform(node, a); + } +} - if (a.left !== b.left || a.top !== b.top) { - const style = getComputedStyle(node); - const transform = style.transform === 'none' ? '' : style.transform; +export function add_transform(node: Element & ElementCSSInlineStyle, a: PositionRect) { + const b = node.getBoundingClientRect(); - node.style.transform = `${transform} translate(${a.left - b.left}px, ${a.top - b.top}px)`; - } + if (a.left !== b.left || a.top !== b.top) { + const style = getComputedStyle(node); + const transform = style.transform === 'none' ? '' : style.transform; + + node.style.transform = `${transform} translate(${a.left - b.left}px, ${a.top - b.top}px)`; } }