From 8454c580bc3b8b9e0998db1a085c9f56be8af933 Mon Sep 17 00:00:00 2001
From: Mike Montoya <dr.mike.montoya@gmail.com>
Date: Thu, 17 Dec 2015 15:04:05 +0000
Subject: [PATCH] Hero: Save bounding rectangle in 'destroy' hook, use it
 later. Set width/height/margin before animating.

---
 modules/hero.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/modules/hero.js b/modules/hero.js
index 2664f6c..de2e27b 100644
--- a/modules/hero.js
+++ b/modules/hero.js
@@ -23,6 +23,7 @@ function create(oldVnode, vnode) {
 function destroy(vnode) {
   var hero = vnode.data.hero;
   if (hero && hero.id) {
+    vnode.boundingRect = vnode.elm.getBoundingClientRect() //save the bounding rectangle to a new property on the vnode
     removed[hero.id] = vnode;
   }
 }
@@ -40,7 +41,7 @@ function post() {
       oldElm = oldVnode.elm;
       oldStyle = oldElm.style;
       newRect = newElm.getBoundingClientRect();
-      oldRect = oldElm.getBoundingClientRect();
+      oldRect = oldVnode.boundingRect; //Use previously saved rect
       dx = oldRect.left - newRect.left;
       dy = oldRect.top - newRect.top;
       wRatio = newRect.width / (Math.max(oldRect.width, 1));
@@ -60,6 +61,9 @@ function post() {
       oldStyle.position = 'absolute';
       oldStyle.top = newRect.top + 'px';
       oldStyle.left = newRect.left + 'px';
+      oldStyle.width = oldRect.width + 'px'; //Needed for elements who were sized relative to their parents
+      oldStyle.height = oldRect.height + 'px'; //Needed for elements who were sized relative to their parents
+      oldStyle.margin = 0; //Margin on hero element leads to incorrect positioning
       oldStyle.transformOrigin = '0 0';
       oldStyle.transform = 'translate('+dx+'px, '+dy+'px)';
       oldStyle.opacity = '1';