Предотвратить затухание CSS при изменении макета - PullRequest
Новая
       12

Предотвратить затухание CSS при изменении макета

0 голосов
/ 29 декабря 2018

Итак, у меня есть div с базовой настройкой непрозрачности CSS: 

.fade {
    opacity: 1;
}

<div class="menu">
    <div class="fade">Text</div>
</div>

Хитрость заключается в том, что для больших экранов этот div всегда должен быть видимым, а на меньших -должен быть скрыт и затем исчезать / исчезать при нажатии кнопки. 

<div class="menu toggled">
    <div class="fade">Text</div>
</div>

@media(max-width:767px) {
    .fade {
        -webkit-transition: opacity 0.5s ease 0s;
        transition: opacity 0.5s ease 0s;
        opacity: 0;
    }

    .toggled .fade {
        opacity: 1;
    }
}

Проблема, с которой я сталкиваюсь (и я понимаю, что это довольно придирчиво) заключается в том, что когда я изменяю размер окна, пересекаяпороговое значение для меньшего размера экрана приводит к тому, что элемент переходит на новую позицию, а затем исчезает.Это выглядит странно.Я просто хочу, чтобы div сразу стал невидимым, когда он встанет на свое новое место.Есть ли способ, которым я могу сделать это, не нарушая преобразование постепенного появления / исчезновения для моей кнопки переключения на меньшем размере экрана?

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

Заранее спасибо!

ОБНОВЛЕНИЕ 1:

Спасибо @Chris James Champeaux заответ!Я немного изменил его, чтобы он соответствовал моим потребностям: 

$(".menu").each(function ()
{
    if ($(this).hasClass("toggled"))
    {
        $(this).removeClass("toggled");
        $(this).children(".fade").each(function ()
        {
            $opacity = $(this).css("opacity");
            $(this).stop(true).animate({ "opacity": "0" }, 500 * $opacity, function ()
            {
                $(this).css("opacity", "");
            });
        });
    }
    else
    {
        $(this).addClass("toggled");
        $(this).children(".fade").each(function ()
        {
            $opacity = $(this).css("opacity");
            $(this).stop(true).animate({ "opacity": "1" }, 500 * (1 - $opacity));
        });
    }
});

Обратный вызов для очистки стиля непрозрачности в строке после затухания был необходим для того, чтобы вернуть управление обратно в таблицу стилей (в противном случае элемент оставался бы скрытымпри переходе назад к большему размеру экрана).

Вызов stop () и интерполированная длительность были необязательными и просто делали так, чтобы анимация плавно переворачивалась, если пользователь снова нажимает кнопку до завершения затухания.

Так или иначе, проблема решена.:) Еще раз спасибо Крис!

ОБНОВЛЕНИЕ 2:

Также просто чтобы уточнить, кто сталкивался с этим позже ... используя это решение, вы также удалили бы непрозрачностьанимация из таблицы стилей, оставляя это так: 

.fade {
    opacity: 1;
}

@media(max-width:767px) {
    .fade {
        opacity: 0;
    }
}

1 Ответ

0 голосов
/ 29 декабря 2018

Вы можете анимировать замирание с помощью щелчка в jquery, возможно, также с помощью javascript. 

$(".toggle").click(function () {
    if ($(".fade").css("opacity") > 0) {
        $(".fade).animate({"opacity": "0"}, 500);
    } else {
        $(".fade).animate({"opacity": "1"}, 500);
    }
});

Я не проверял это, но оно должно работать

...