时间戳

首页 > 解决方案 > vue.js 过渡只创建一秒钟的垂直滚动条

javascript - vue.js 过渡只创建一秒钟的垂直滚动条

问题描述

我正在使用Vue.js和transitions。

这是我的组件。

 <main id="main-content" class="t-center" role="main">
            <transition :name="!phone ? 'slide-right' : 'slide-left'" mode="out-in">
                <keep-alive>
                    <component :is="stepComponent"  />
                </keep-alive>
            </transition>
        </main>

这是我的.scss 

.fade-enter-active,
.fade-leave-active {
    transition: opacity .3s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.slide-left-enter-active,
.slide-right-enter-active,
.slide-up-enter-active,
.slide-left-leave-active,
.slide-right-leave-active,
.slide-up-leave-active  {
    transition: transform .2s, opacity .2s;
}

.slide-left-enter,
.slide-right-enter,
.slide-up-enter,
.slide-left-leave-to,
.slide-right-leave-to,
.slide-up-leave-to {
    opacity: 0;
}

.slide-left-enter {
    transform: translateX(100vw);
}

.slide-left-leave-to {
    transform: translateX(-100vw);
}

.slide-right-enter {
    transform: translateX(-100vw);
}

.slide-right-leave-to {
    transform: translateX(100vw);
}

.slide-up-enter {
    transform: translateY(10px);
}

.slide-up-leave-to {
    transform: translateY(-10px);
}

现在，当发生stepComponent变化时，另一个组件到位，旧组件从右到左逐渐消失，新组件从右到左出现。但问题是仅仅一秒钟或几毫秒，就会出现一个垂直滚动条，当新组件到达最终位置时，该垂直滚动条就会被删除。

仅当我在 chrome（响应模式）上对其进行测试时，才会出现垂直滚动条。如果我在与响应式相同的屏幕尺寸上对其进行测试，但未激活响应式模式，则不会出现垂直滚动条，一切都很好。

为什么会出现垂直滚动条？overflow:hidden没有帮助。

标签： javascripthtmlcssvue.jsvuejs2

解决方案

好吧，这可能有点矫枉过正，但是当有vue时，就有办法了。正如@revliscano 提到的那样，您实际上可以使用life cycle event hooksandwatchers来翻转属性。overflow-y

首先，开始观察路线变化。这是我们将摆脱溢出-y的地方。每次，我们改变一个路由，overflow-y 就会被隐藏。

 watch: {
    $route(to, from) {
        document.getElementById("scrollContainer").style.overflowY = "hidden";
        console.log("hidden now");
 }

然后，当 DOM 更新时，我们会在几毫秒后将其放回原处。

updated: function () {
    setTimeout(function () {
        document.getElementById("scrollContainer").style.overflowY = "auto";
        console.log("set to visible");
    }, 300);
},

scrollContainer是我使用的内部 div，但您应该能够将其更改为您喜欢的任何元素。

您可以将此逻辑保留在您的App.vue. 因此，您的路线视图将保持整洁。

推荐阅读