Javascript Gridsome Vue-路由之间的动画

我正在寻找一种在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>

风格

---

这几乎奏效了，但我不认为这是路线转换的好做法。如果你知道怎么做，我会非常感激。谢谢

欢迎来到StackOverflow

这不起作用，因为您尝试在

上使用的值不存在。默认情况下，转换在出现之前没有

钩子，需要修改

元素才能使用此元素

相反，您希望使用并引用以下css类：

。打开并输入活动{
转变：转变1s；
}
.打开进入{
变换：scaleX（0）；
}

您还可以删除div.overlay和方法。上面的CSS应该让你走上你想要的道路——但这并不是你想要的效果

您还可以阅读有关Vue转换的更多信息，其中概述了如果您想获得更多控制权，而不仅仅是

-enter

和

-enter active

（在这种情况下，您需要从转换中删除

出现

），可以使用的CSS类

希望这有帮助

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