refactor(css): ♻️ use barba.helpers for nextTick

packages/css/__tests__/css.states.test.ts

@@ -1,22 +1,15 @@
 /* tslint:disable:no-string-literal */
+import barba from '@barba/core/src';
 import css from '../src';
 
 // Dom
 const container = document.createElement('div');
 const kind = 'test';
 
-// Utils
-/**
- * Wait for 1 repaint
- */
-function nextTick() {
-  return new Promise(resolve => {
-    window.requestAnimationFrame(resolve);
-  });
-}
-
+css.install(barba);
 css.add = jest.fn();
 css.remove = jest.fn();
+
 container.addEventListener = jest.fn();
 container.removeEventListener = jest.fn();
 
@@ -35,7 +28,7 @@ it('do next', async () => {
   expect(css.callbacks[kind]).toBeDefined();
   expect(container.addEventListener).toHaveBeenCalledTimes(1);
 
-  await nextTick();
+  await barba.helpers.nextTick();
 
   expect(css.remove).toHaveBeenNthCalledWith(1, container, kind);
   expect(css.add).toHaveBeenCalledTimes(1);

packages/css/src/css.ts

@@ -89,10 +89,10 @@ class Css implements IBarbaPlugin<{}> {
   public async start(container: HTMLElement, kind: string): Promise<void> {
     // Set initial CSS values
     this.add(container, kind); // CSS: add kind
-    await this._nextTick();
+    await this.barba.helpers.nextTick();
     // Apply CSS transition
     this.add(container, `${kind}-active`); // CSS: add kind-active
-    await this._nextTick();
+    await this.barba.helpers.nextTick();
   }
 
   /**
@@ -108,17 +108,17 @@ class Css implements IBarbaPlugin<{}> {
         this.callbacks[kind] = resolve;
 
         container.addEventListener('transitionend', resolve, false);
-        await this._nextTick();
+        await this.barba.helpers.nextTick();
         this.remove(container, kind); // CSS: remove kind
-        // await this._nextTick();
+        // await this.barba.helpers.nextTick();
         this.add(container, `${kind}-to`); // CSS: add kind-to
-        await this._nextTick();
+        await this.barba.helpers.nextTick();
       });
     } else {
       this.remove(container, kind); // CSS: remove kind
-      await this._nextTick();
+      await this.barba.helpers.nextTick();
       this.add(container, `${kind}-to`); // CSS: add kind-to
-      await this._nextTick();
+      await this.barba.helpers.nextTick();
     }
   }
 
@@ -243,16 +243,6 @@ class Css implements IBarbaPlugin<{}> {
   private _afterEnter(data: ITransitionData): Promise<void> {
     return this.end(data.next.container, 'enter');
   }
-
-  private _nextTick(): Promise<number> {
-    return new Promise(resolve => {
-      window.requestAnimationFrame(resolve);
-    });
-    // DEV: same result?
-    // return new Promise(resolve => {
-    //   setTimeout(resolve, 0);
-    // });
-  }
 }
 
 const css = new Css();