переключение прозрачности с помощью jQuery после анимации ключевых кадров на элементе - PullRequest
Новая
       35

переключение прозрачности с помощью jQuery после анимации ключевых кадров на элементе

0 голосов
/ 05 июня 2019

У меня есть элемент #show, который начинается как видимый на странице, исчезает при нажатии кнопки (на его месте появляется 2-й элемент #hidden), а затем снова появляется при следующем нажатии кнопки (#hidden исчезает). Я анимировал #show прозрачность при нажатии кнопки с помощью jQuery.

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

Я не уверен, есть ли другой способ переключать видимость #show в jQuery или альтернативу ключевых кадров в jQuery. fadeToggle не подходит для этого сценария, потому что мне нужно сохранить высоту #show.

вот ключевые кадры на #show: 

@-webkit-keyframes fade { 0% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; } }
@keyframes fade { 0% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; } }

#show css: 

#show {
    position: relative;
    width: 100%;
    height: 100%;
    animation: fade 1.5s;
}

и элементы 'jQuery: 

$('#button').click(function () {
    if ($('#shown').css('opacity') == 1) {
        $('#shown').animate({opacity:0}, 250);
        $('#hidden').fadeToggle(250);
    }
    else {
        $('#hidden').fadeToggle(250);
        $('#shown').animate({opacity:1}, 250);
    }
});

вот скрипка: http://jsfiddle.net/guwq51om/3/

tl; dr: может ли элемент иметь начальную анимацию ключевых кадров при загрузке веб-страницы, и его непрозрачность все еще может переключаться с помощью jQuery?

...