fix(core): 🐛 fix glitch on containers add/remove

barbajs · Apr 29, 2019 · 374660c · 374660c
1 parent 3730d30
commit 374660c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/packages/core/src/modules/Transitions.ts b/packages/core/src/modules/Transitions.ts
@@ -171,7 +171,7 @@ export class Transitions {
 
       if (sync) {
         try {
-          this.add(data, wrapper);
+          await this.add(data, wrapper);
           // Before actions
           await this._doAsyncHook('beforeLeave', data, t);
           await this._doAsyncHook('beforeEnter', data, t);
@@ -213,7 +213,7 @@ export class Transitions {
           // Enter
           /* istanbul ignore else */
           if (leaveResult !== false) {
-            this.add(data, wrapper);
+            await this.add(data, wrapper);
 
             await this._doAsyncHook('beforeEnter', data, t);
             await this.enter(data, t, leaveResult);
@@ -227,10 +227,10 @@ export class Transitions {
         }
       }
 
-      this._doAsyncHook('after', data, t);
+      await this._doAsyncHook('after', data, t);
 
       // Remove current contaienr
-      this.remove(data);
+      await this.remove(data);
     } catch (error) {
       this._running = false;
       // TODO: use cases for cancellation
@@ -280,19 +280,22 @@ export class Transitions {
   /**
    * Add next container.
    */
-  public add(data: ITransitionData, wrapper: Wrapper): void {
+  public async add(data: ITransitionData, wrapper: Wrapper): Promise<void> {
     wrapper.appendChild(data.next.container);
+    await helpers.nextTick();
     hooks.do('nextAdded', data);
   }
 
   /**
    * Remove current container.
    */
-  public remove(data: ITransitionData): void {
+  public async remove(data: ITransitionData): Promise<void> {
     const { container } = data.current;
 
     if (document.body.contains(container)) {
+      await helpers.nextTick();
       container.parentNode.removeChild(container);
+      await helpers.nextTick();
       hooks.do('currentRemoved', data);
     }
   }

diff --git a/packages/core/src/utils/helpers.ts b/packages/core/src/utils/helpers.ts
@@ -61,6 +61,16 @@ export const update = async (
   }
 };
 
+/**
+ * Next tick
+ */
+export const nextTick = () =>
+  new Promise(resolve => {
+    window.requestAnimationFrame(resolve);
+    // DEV: same result?
+    // setTimeout(resolve, 0);
+  });
+
 /**
  * Turn a route string such as `/user/:name` into a regular expression.
  *