3

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

我想做的是

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

它几乎奏效了，但我认为这不是路线转换的好习惯。如果您知道如何制作它，我将不胜感激。谢谢

4

1 回答 1

0

欢迎来到 StackOverflow！

这不起作用，因为您尝试使用的值<transition>不存在。过渡默认情况下没有before-appear钩子，并且需要您修改<transition>元素以具有此元素。

相反，您想使用<transition name="open" appear>和引用以下 css 类：

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

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

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

您还可以在此处阅读有关 Vue 过渡的更多信息，其中概述了您可以使用的 CSS 类，如果您想要更多的控制权而不仅仅是-enter和-enter-active（在这种情况下，您需要appear从过渡中删除）。

希望这可以帮助！

于 2020-07-06T17:13:51.953 回答