当手机改变方向（横向/纵向）时禁用 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 也是解决您问题的一种可能方法。