From 953a32675700eee04c0d227810ec75fcacb7ee78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20van=20Br=C3=BCgge?= <supermanitu@gmail.com>
Date: Fri, 24 Aug 2018 22:12:58 +0300
Subject: [PATCH] Force page reflow before applying styles

---
 src/modules/style.ts | 10 ++++++++++
 test/style.js        | 16 ++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/modules/style.ts b/src/modules/style.ts
index e86a030..82f009d 100755
--- a/src/modules/style.ts
+++ b/src/modules/style.ts
@@ -8,6 +8,7 @@ export type VNodeStyle = Record<string, string> & {
 
 var raf = (typeof window !== 'undefined' && window.requestAnimationFrame) || setTimeout;
 var nextFrame = function(fn: any) { raf(function() { raf(fn); }); };
+var reflowForced = false;
 
 function setNextFrame(obj: any, prop: string, val: any): void {
   nextFrame(function() { obj[prop] = val; });
@@ -66,6 +67,10 @@ function applyRemoveStyle(vnode: VNode, rm: () => void): void {
     rm();
     return;
   }
+  if(!reflowForced) {
+    getComputedStyle(document.body).transform;
+    reflowForced = true;
+  }
   var name: string, elm = vnode.elm, i = 0, compStyle: CSSStyleDeclaration,
       style = s.remove, amount = 0, applied: Array<string> = [];
   for (name in style) {
@@ -83,7 +88,12 @@ function applyRemoveStyle(vnode: VNode, rm: () => void): void {
   });
 }
 
+function forceReflow() {
+  reflowForced = false;
+}
+
 export const styleModule = {
+  pre: forceReflow,
   create: updateStyle,
   update: updateStyle,
   destroy: applyDestroyStyle,
diff --git a/test/style.js b/test/style.js
index c42152a..33e6aed 100644
--- a/test/style.js
+++ b/test/style.js
@@ -116,6 +116,22 @@ describe('style', function() {
     fakeRaf.step();
     assert.equal(elm.style.fontSize, '20px');
   });
+  it('applies tranform as transition on remove', function(done) {
+    var btn = h('button', { style: {
+        transition: 'transform 0.5s',
+        remove: { transform: 'translateY(100%)' }
+    }}, ['A button']);
+    var vnode1 = h('div.parent', {}, [btn]);
+    var vnode2 = h('div.parent', {}, [null]);
+    document.body.appendChild(vnode0);
+    patch(vnode0, vnode1);
+    patch(vnode1, vnode2);
+    assert.strictEqual(document.querySelectorAll('button').length, 1);
+    setTimeout(function () {
+        assert.strictEqual(document.querySelectorAll('button').length, 0);
+        done();
+    }, 700);
+  });
   describe('using toVNode()', function () {
     it('handles (ignoring) comment nodes', function() {
       var comment = document.createComment('yolo');