Gridsome -路线之间的动画

Question

我正在寻找一个解决方案，使路线之间的动画在网格中。我想创建全宽度和高度覆盖动画从左到右。当覆盖是全宽时，它应该替换插槽中的内容。

我想要做的是

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

它几乎成功了，但我不认为这是路由转换的好做法。如果你知道怎么做，我将不胜感激。谢谢

Answer 1

欢迎使用StackOverflow！

这不起作用，因为您试图在<transition>上使用的值不存在。默认情况下，转换没有before-appear钩子，需要修改<transition>元素才能拥有此元素。

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

.open-enter-active {
  transition: transform 1s;
}

.open-enter {
  transform: scaleX(0);
}

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

你还可以阅读更多关于Vue transition here的文章，它概述了如果你想要比-enter和-enter-active更多的控制，你可以使用的here类(在这种情况下，你需要从转换中删除appear )。

希望这能有所帮助！