javascript - Gridsome Vue - ルート間のアニメーション

Question

gridsome でルート間のアニメーションを作成するソリューションを探しています。左から右にアニメーションする全幅と高さのオーバーレイを作成したいと思います。オーバーレイが全幅の場合、スロット内のコンテンツを置き換える必要があります。

私がやろうとしていたのは

    <div class="overlay" :class="{ 'overlay--open': overlayOpen }"></div>
    <transition
        appear
        v-on:before-appear="beforeAppear"
        v-on:appear="appear"
        v-on:after-appear="afterAppear"
    >
        <main>
            <slot/>
        </main>
    </transition>

そしてメソッドで

methods: {
    beforeAppear: function (el) {
        this.overlayOpen = true
    }
}

スタイル

.overlay{
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #0c0c0c;
  z-index: 99999;
  transition: all 500ms;
  transform-origin: left;
  transform: scaleX(0);

&--open{
    animation: open 1s;
}


@keyframes open {
0% {
    transform: scaleX(0);
}
50% {
    transform: scaleX(1);
}
100% {
    transform: scaleX(0);
}

ほぼうまくいきましたが、ルート遷移の良い方法だとは思いません。作り方などありましたら、よろしくお願いします。ありがとう