全屏 div 在 vue2JS 中从上滑动

Question

我正在尝试创建一个 100% 宽度和 100vh 高度 div 的页面，它会从屏幕上方滑到页面下方。在 70% 的动画我想把它放在底部，然后在 90% 时向上移动 30px，在 100% 时让它再次在底部所以它看起来像是从上滑然后在底部反弹。

我希望在单击 grand grandchild 中的某些 DOM 元素后发生这种情况，所以基本上，我将使用 eventBus 并且我的 "sliding div" 将位于根组件中（app.vue) 并在 child 我将发出：

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

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

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

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

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

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

/* 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 或类似的东西取决于 OS.

在演示中，它也没有悬停在整个页面上，但它为按钮留下了 space，如果你克隆它，你会看到。

好吧，实际上我处理了修复演示回购中的转换，现在唯一的问题是它没有 veil/cover 整个页面，但它为根内容留下 space。再次拉取 repo 以查看。

Answer 1

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

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

全屏 div 在 vue2JS 中从上滑动

Full screen div sliding from up in vue2JS

css

animation

transition

vue.js

vuejs2