當手機改變方向（橫向/縱向）時禁用 CSS 轉換

Question

在我的頁面上，我有一個：

<div id="id_modal_background"></div>

即在模態登錄窗口和背景圖像之間。 它的任務是（a）在顯示模態登錄窗口后模糊背景圖像，以及（b）在模態登錄窗口關閉時消除模糊。

為了使模糊看起來不錯，它需要 1 秒的過渡時間，在 CSS 中設置如下：

#id_modal_background{
    z-index: 2;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: 1s;
}

但是這個過渡時間給我的手機帶來了副作用，其中從橫向到縱向的方向變化（但反之亦然）需要1s來重繪模糊。 而且看起來不好看。

我正在使用此函數繪制（ id_modal_background_visibility(1) ）或拆除（ id_modal_background_visibility(0) ）模糊：

function id_modal_background_visibility(a){

    let r = '';
    let m = document.getElementById('id_modal_background');

    switch(a){
        case 0:
            r = 'OFF';
            // In order to reference "backdrop-filter" we camelcase it!
            m.style.backdropFilter = 'blur(0px) grayscale(0)';
            m.style.visibility = 'hidden';
            break;
        case 1:
            r = 'ON';
            // In order to reference "backdrop-filter" we camelcase it!
            m.style.visibility = 'visible';
            m.style.backdropFilter = 'blur(15px) grayscale(0.25)';
            break;
        default:
            r = 'ERROR';
            m.style.visibility = 'hidden';
            break;
    }

    console.log('Modal background visibility: ' + r);
}

如果有人可以幫助我消除在任何類型的方向改變時發生的過渡時間，但保持過渡時間，否則我會非常高興。

Answer 1

您可以使用 css media queries

@media (orientation: landscape) {

}

在此處閱讀更多信息如何在 css 中設置縱向和橫向媒體查詢？

Answer 2

您可以像下面這樣管理您的代碼：

window.addEventListener("orientationchange", function() {
    if(window.innerHeight > window.innerWidth){
        console.log("Portrait");
    } else {
        console.log("Landscape");
    }
}, true);

您可以相應地應用 CSS 類。 媒體查詢 CSS 也是解決您問題的一種可能方法。