css - 在 vue2JS 中从上滑动全屏 div

Question

我正在尝试创建一个 100% 宽度和 100vh 高度的 div，它会从页面上方滑出屏幕并滑到页面下方。在 70% 的动画中，我想让它位于底部，然后在 90% 时将其向上移动 30px，在 100% 时再次使其位于底部，这样它看起来就像从上方滑动然后在底部反弹。

我希望在单击孙子中的某个 DOM 元素后发生这种情况，所以基本上，我将使用 eventBus，我的“滑动 div”将位于根组件 (app.vue) 和我会发射的 child :

showObserved() {
     eventBus.$emit('showObserved');
}

我在这里发出我的自定义事件，然后我在根组件中观察这个事件并改变 bool 变量:

eventBus.$on('showObserved', async() => {
    this.showObserved = true;
});
eventBus.$on('hideObserved', async() => {
    this.showObserved = false;
});

基于这个 bool 值，我使用 v-if 指令显示我的滑动 div:

<transition name="slide-up" mode="out-in">
    <observed-offer v-if="showObserved"></observed-offer>
</transition>

最后，我使用了 transition vue 内置组件来使其滑动，这是我的样式，应该生效，我在第一个段落中解释过:

/* slide from up to down */
.slide-up-leave-active {
    animation: slide-out-up .4s linear;
}

.slide-up-enter-active {
    animation: slide-in-up .4s linear forwards;
}

.slide-up-in-leave-active {
    animation: slide-out-up .4s linear;
}

.slide-up-leave {
    opacity: 1;
    transform: translateY(-100%);
}

@keyframes slide-out-up {
    0% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(10%);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes slide-in-up {
    0% {
        transform: translateY(-100%);
    }
    70% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(10%);
    }
    100% {
        transform: translateY(0);
    }
}

这是我的滑动 div 的样式:

.observed {
    width: 100%;
    height: 100vh;
    z-index: 999999999;
    overflow: hidden;
    background-color: white;
}

但这不起作用的行为是它立即使整个页面变白并且仅滑动 div 的内容。我很确定我只是制作了错误的 CSS 样式我尝试了各种其他样式但它没有用。也可能它也与 height: 100vh 有关。

---

我添加 demo repository .在此演示中，滑入几乎可以正常工作，但滑出根本不起作用。这个元素的安装很简单，只需克隆它，然后 cd path/to/project 然后 npm install && npm run dev 或类似的东西，具体取决于操作系统。

在演示中，它也没有悬停在整个页面上，但它为按钮留出了空间，如果您克隆它，您会看到这一点。

---

好吧，实际上我处理了修复演示 repo 中的转换，现在唯一的问题是它不会隐藏/覆盖整个页面，但它为根内容留出了空间。再次拉取 repo 以查看。

Answer 1

问题是我使用了错误的过渡样式，并且我的面板组件上没有 top: 0 left: 0 的固定位置。修复后它可以正常工作，您可以在演示存储库中检查。

很抱歉浪费时间解决我自己解决的问题，但在原始大元素中解决问题要困难得多。当我创建这个演示存储库时，它变得如此简单。