follow-up fix to #2871

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 && `@prepare_outro(${this.var}, ${rect});`}
 		`);
 
 		const params = this.node.animation.expression ? this.node.animation.expression.render(block) : '{}';

src/runtime/internal/animations.ts

@@ -77,6 +77,10 @@ export function create_animation(node: Element & ElementCSSInlineStyle, from: Po
 	return stop;
 }
 
+export function prepare_outro(node: Element & ElementCSSInlineStyle, rect: PositionRect) {
+	add_transform(node, rect);
+}
+
 export function fix_position(node: Element & ElementCSSInlineStyle) {
 	const style = getComputedStyle(node);
 
@@ -86,13 +90,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) {
+function add_transform(node: Element & ElementCSSInlineStyle, a: PositionRect) {
-			const style = getComputedStyle(node);
+	const b = node.getBoundingClientRect();
-			const transform = style.transform === 'none' ? '' : style.transform;
 
-			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)`;
 	}
 }