手机改变方向时禁用 CSS 过渡（横向/纵向）答案

【问题标题】：Disable CSS transition when phone changes orientation (landscape/portrait)手机改变方向时禁用 CSS 过渡（横向/纵向）
【发布时间】：2020-04-29 20:18:02
【问题描述】：

在我的页面上我有一个：

<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);
}

如果有人可以帮助我消除在任何类型的方向变化时发生的过渡时间，但保留过渡时间，否则我会非常高兴。

【问题讨论】：

它太大了，阅读量太大，请尝试缩短您的问题，将为我们所有人节省大量时间
我发现了问题的一部分。如果我通过使用transition: backdrop-filter 1s; 而不是transition: 1s; 仅隔离到backdrop-filter 的转换，问题就消失了，但是出现了新问题，因为现在转换在打开模式登录窗口时起作用，但在关闭窗口时不起作用...

标签： javascript css mobile orientation transition

【解决方案1】：

你可以利用cssmedia queries

@media (orientation: landscape) {

}

在此处阅读更多信息How to set portrait and landscape media queries in css?

【讨论】：

我知道它们，但它们引用了位置，而我的问题发生在位置 change 上，所以我很好奇您是否可以使用提供完整的解决方案@media 选择器。

【解决方案2】：

您可以像下面这样管理您的代码：

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

您可以相应地应用 CSS 类。媒体查询 CSS 也是解决您问题的一种可能方式。

【讨论】：