Barba.js(v2)を使用した画面遷移後のレンダリング完了イベントが取りたい

Question

質問を見て頂きありがとうございます。

どうかこの問題を解決するアドバイスを頂けないでしょうか。

前提条件

Barba.jsを使用した画面遷移処理

要件

ローディング画面の実装.

画面遷移時に、全画面を覆うようにdiv要素にアニメーションを付け遷移先画面がレンダリングされた後、画面を覆っているdivを非表示にするアニメーション.

実装済み処理

アニメーションの部分（ローディング画面のアニメーション）自体の処理は実装完了.

問題点

レンダリングが完了する前にローディング画面が非表示になってしまう不具合が発生.

コード

const $barbaContainer = $('.barbaContainer');
const $pageTransition = $('.page_transition'); // ローディング画面に相当するdiv要素.

function callbackAnimation(current, callback) {
  const dulation = window.innerWidth < 768 ? .8 : 1.2;
  TweenMax.to(current, dulation, callback);
}

barba.init({
  transitions: [{
    sync: true,
    timeout: 10000,
    leave(data) {
      const done = this.async();
      $pageTransition.css({ 'right': 'auto', 'left': '-10%' });
      let widthVal =  window.innerWidth * 1.5;
      callbackAnimation($pageTransition, {
        width: widthVal,
        ease: Circ.easeIn,
        onComplete: () => {
          header.hide();
          $(data.current.container).remove();
          done();
        }
      });
    },
    after() {
      $pageTransition.css({ 'right': '-10%', 'left': 'auto' });
      callbackAnimation($pageTransition, { width: 0, ease: Circ.easeOut });
    },
  }]
});

試したこと

レンダリングが完了した後に非表示にしたいので下記のようにloadイベントを取ろうとしたが取ることができなかった.
そもそもコールバック関数自体が発火されない.

after() {
  $('.barbaContainer').on('load', () => {
    $pageTransition.css({ 'right': '-10%', 'left': 'auto' });
    callbackAnimation($pageTransition, { width: 0, ease: Circ.easeOut });
  });
}

その他

after関数はレンダリング完了後でenter関数は DOMツリーの構築後だと思っていたんだが、そのあたりをご理解している方はご教授頂きたいです。。。

Answer 1

根本的な解決はしてませんが別の方法で表現の実現をしました。