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

Question

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

Answer 1

好吧，这可能有点矫枉过正，但是当有vue时，就有办法了。正如@revliscano 提到的那样，您实际上可以使用life cycle event hooksandwatchers来翻转属性。overflow-y首先，开始观察路线变化。这是我们将摆脱溢出-y的地方。每次，我们改变一个路由，overflow-y 就会被隐藏。&nbsp;watch: {&nbsp; &nbsp; $route(to, from) {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("scrollContainer").style.overflowY = "hidden";&nbsp; &nbsp; &nbsp; &nbsp; console.log("hidden now");&nbsp;}然后，当 DOM 更新时，我们会在几毫秒后将其放回原处。updated: function () {&nbsp; &nbsp; setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("scrollContainer").style.overflowY = "auto";&nbsp; &nbsp; &nbsp; &nbsp; console.log("set to visible");&nbsp; &nbsp; }, 300);},scrollContainer是我使用的内部 div，但您应该能够将其更改为您喜欢的任何元素。您可以将此逻辑保留在您的App.vue. 因此，您的路线视图将保持整洁。