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

【问题标题】：vue.js transition creates vertical scrollbar for just a secondvue.js 过渡只创建一秒钟的垂直滚动条
【发布时间】：2020-03-23 15:12:09
【问题描述】：

我正在使用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 没有帮助。

【问题讨论】：

试图自己解决这个问题，似乎父组件 div 将需要溢出：仅在过渡期间隐藏。你知道了吗？过渡是从右还是左？

标签： javascript html css vue.js vuejs2

【解决方案1】：

好吧，这可能有点矫枉过正，但是当有 vue 时，就有办法了。您实际上可以使用life cycle event hooks 和watchers 来翻转@revliscano 提到的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 中。因此，您的路线视图将保持整洁。

【讨论】：