From 068a4b73123440dada8f587175f1fe17e123f63b Mon Sep 17 00:00:00 2001
From: Harald Fassler <harald.fassler@gmail.com>
Date: Thu, 30 May 2019 18:25:20 +0200
Subject: [PATCH] follow-up fix to #2871

---
 .../render-dom/wrappers/Element/index.ts      |  2 ++
 src/runtime/internal/animations.ts            | 20 +++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/compiler/compile/render-dom/wrappers/Element/index.ts b/src/compiler/compile/render-dom/wrappers/Element/index.ts
index 41db1c03a0..712fab3eca 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 && `@prepare_outro(${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..b1b4a0cf8a 100644
--- a/src/runtime/internal/animations.ts
+++ b/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) {
-			const style = getComputedStyle(node);
-			const transform = style.transform === 'none' ? '' : style.transform;
+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)`;
 	}
 }