第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue.js 過渡只創(chuàng)建一秒鐘的垂直滾動條

vue.js 過渡只創(chuàng)建一秒鐘的垂直滾動條

ITMISS 2022-05-26 17:06:44
我正在使用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);}現(xiàn)在,發(fā)生stepComponent變化時,另一個組件到位,舊組件從右到左逐漸消失,新組件從右到左出現(xiàn)。但問題是,僅僅一秒鐘或幾毫秒,就會出現(xiàn)一個垂直滾動條,當(dāng)新組件到達(dá)最終位置時,該垂直滾動條就會被刪除。僅當(dāng)我在 chrome(響應(yīng)模式)上對其進(jìn)行測試時,才會出現(xiàn)垂直滾動條。如果我在與響應(yīng)式相同的屏幕尺寸上對其進(jìn)行測試,但未激活響應(yīng)式模式,則不會出現(xiàn)垂直滾動條,一切都很好。為什么會出現(xiàn)垂直滾動條?overflow:hidden沒有幫助。
查看完整描述

1 回答

?
翻閱古今

TA貢獻(xiàn)1780條經(jīng)驗 獲得超5個贊

好吧,這可能有點矯枉過正,但是當(dāng)有vue時,就有辦法了。正如@revliscano 提到的那樣,您實際上可以使用life cycle event hooksandwatchers來翻轉(zhuǎn)屬性。overflow-y


首先,開始觀察路線變化。這是我們將擺脫溢出-y的地方。每次,我們改變一個路由,overflow-y 就會被隱藏。


 watch: {

    $route(to, from) {

        document.getElementById("scrollContainer").style.overflowY = "hidden";

        console.log("hidden now");

 }

然后,當(dāng) DOM 更新時,我們會在幾毫秒后將其放回原處。


updated: function () {

    setTimeout(function () {

        document.getElementById("scrollContainer").style.overflowY = "auto";

        console.log("set to visible");

    }, 300);

},

scrollContainer是我使用的內(nèi)部 div,但您應(yīng)該能夠?qū)⑵涓臑槟矚g的任何元素。


您可以將此邏輯保留在您的App.vue. 因此,您的路線視圖將保持整潔。


查看完整回答
反對 回復(fù) 2022-05-26
  • 1 回答
  • 0 關(guān)注
  • 145 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號