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 就会被隐藏。

 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. 因此，您的路线视图将保持整洁。