当电话改变方向（横向/纵向）时禁用CSS过渡

Question

在我的页面上，我有一个：

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

位于模式登录窗口和背景图像之间。它的任务是在显示模式登录窗口后（a）使背景图像模糊，并在模式登录窗口关闭时（b）消除模糊。

为了使模糊效果看起来不错，它需要1s的过渡时间，这在CSS中是这样设置的：

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

但是这个过渡时间给我带来了手机的副作用，这些手机的方位从横向更改为纵向（但反之则不然）>>需要1s重绘模糊。而且看起来不太好。

我正在使用此功能绘制或消除模糊：

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.transition = 'none';
            m.style.visibility = 'hidden';
            break;
        case 1:
            r = 'ON';
            // In order to reference "backdrop-filter" we camelcase it!
            m.style.visibility = 'visible';
            //m.style.transition = '1s';
            m.style.backdropFilter = 'blur(15px) grayscale(0.25)';
            break;
        default:
            r = 'ERROR';
            m.style.visibility = 'hidden';
            break;
    }

    console.log('Modal background visibility: ' + r);
}
[如果有人可以帮助我消除在任何一种方向变化中发生的过渡时间，但如果不保留这种过渡时间，我将非常高兴。 

---

[您将看到我在函数中注释了m.style.transition = '1s';和m.style.transition = 'none';，因为我尝试了此操作，但没有用...

我的页面上有一个：

，位于模式登录窗口和背景图像之间。它的任务是（a）模态登录后使背景图像模糊...

Answer 1

您可以使用CSS media queries