Question

我正在尝试创建一个100％宽度和100vh高度的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或其他类似的操作系统即可。

在演示中，它也不会悬停整个页面，但是会保留按钮的空间，您将看到是否克隆它。

实际上我现在可以解决在演示存储库中的过渡问题，唯一的问题是它不会遮盖/遮盖整个页面，但会留出根目录空间。再次拉回购来查看。

Answer 1

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

很抱歉浪费时间解决了我自己的问题，但要对源大型项目进行故障排除要困难得多。当我创建此演示存储库时，它变得如此简单。

全屏div在vue2JS中向上滑动

1 个答案: