在 vue2JS 中从上滑动全屏 div答案

【问题标题】：Full screen div sliding from up in vue2JS在 vue2JS 中从上滑动全屏 div
【发布时间】：2019-02-28 02:09:22
【问题描述】：

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

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

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 内置组件来使其滑动，这是我在第一段中解释的应该生效的样式：

/* 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 以查看。

【问题讨论】：

您能否在codesandbox 中分享您的代码，以便对其进行测试并查看问题
我认为这是不可能的，因为导入了诸如 eventBus 和 <template>,<script> 语法之类的东西。我可以创建演示存储库。
你可以很容易地用codesandbox分享它或使用git repo
我会在 20 分钟内更新问题并添加演示 repo。
完成。请看一看。

标签： css animation vue.js vuejs2 transition

【解决方案1】：

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

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

【讨论】：