Отключить CSS переход, когда телефон меняет ориентацию (альбомная / книжная) - PullRequest
Новая
       29

Отключить CSS переход, когда телефон меняет ориентацию (альбомная / книжная)

0 голосов
/ 13 января 2020

На моей странице есть: 

<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, чтобы перерисовать размытие. И это не выглядит красиво.

enter image description here

Я использую эту функцию для рисования (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);
}

Если кто-то может помочь мне убрать время перехода, которое происходит при любом изменении ориентации, но сохранить время перехода иначе, я был бы более чем счастлив.

Ответы [ 2 ]

0 голосов
/ 13 января 2020

Вы можете управлять своим кодом, как показано ниже: 

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

И вы можете соответственно применять класс CSS. Также медиа-запрос CSS является возможным способом решения вашей проблемы.

0 голосов
/ 13 января 2020

Вы можете использовать css media queries 

@media (orientation: landscape) {

}

Подробнее здесь Как задать портретные и альбомные медиазапросы в css?

...