From b56e3e22dfad7aa6f19ca3c54551486bf41f51bd Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 13 May 2018 21:28:35 -0400
Subject: [PATCH] position nodes absolutely when outroing, if animations are
 present

---
 src/compile/nodes/EachBlock.ts |  2 +-
 src/shared/keyed-each.js       | 27 +++++++++++++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/compile/nodes/EachBlock.ts b/src/compile/nodes/EachBlock.ts
index 358291e332..592748d61b 100644
--- a/src/compile/nodes/EachBlock.ts
+++ b/src/compile/nodes/EachBlock.ts
@@ -321,7 +321,7 @@ export default class EachBlock extends Node {
 
 			${this.block.hasOutroMethod && `@transitionManager.groupOutros();`}
 			${this.block.animation && `const ${rects} = @measure(${blocks});`}
-			${blocks} = @updateKeyedEach(${blocks}, #component, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.get_each_context});
+			${blocks} = @updateKeyedEach(${blocks}, #component, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${String(!!this.block.animation)}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.get_each_context});
 			${this.block.animation && `@animate(${blocks}, ${rects}, %animations-${this.children[0].animation.name}, {});`}
 		`);
 
diff --git a/src/shared/keyed-each.js b/src/shared/keyed-each.js
index 2049217688..66f993bdc4 100644
--- a/src/shared/keyed-each.js
+++ b/src/shared/keyed-each.js
@@ -11,7 +11,30 @@ export function outroAndDestroyBlock(block, lookup) {
 	});
 }
 
-export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic, ctx, list, lookup, node, has_outro, create_each_block, intro_method, next, get_context) {
+export function fixAndOutroAndDestroyBlock(block, lookup) {
+	const { node } = block;
+	const style = getComputedStyle(node);
+
+	if (style.position !== 'absolute' && style.position !== 'fixed') {
+		const { width, height } = style;
+		const a = node.getBoundingClientRect();
+		node.style.position = 'absolute';
+		node.style.width = width;
+		node.style.height = height;
+		const b = node.getBoundingClientRect();
+
+		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)`;
+		}
+	}
+
+	outroAndDestroyBlock(block, lookup);
+}
+
+export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic, ctx, list, lookup, node, has_outro, has_animation, create_each_block, intro_method, next, get_context) {
 	var o = old_blocks.length;
 	var n = list.length;
 
@@ -44,7 +67,7 @@ export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic
 	var will_move = {};
 	var did_move = {};
 
-	var destroy = has_outro ? outroAndDestroyBlock : destroyBlock;
+	var destroy = has_outro ? has_animation ? fixAndOutroAndDestroyBlock : outroAndDestroyBlock : destroyBlock;
 
 	function insert(block) {
 		block[intro_method](node, next);