Merge pull request #390 from jvanbruegge/forceEval

Force evaluation of the element stylesheet

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,

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');