addEventListener для определенного animationName - PullRequest
Новая
       12

addEventListener для определенного animationName

0 голосов
/ 03 марта 2019

Я написал код ниже.Я пытаюсь вызывать функции одну за другой на основе обработчиков событий animationend.Проблема возникает в коде js после startScreenContainer.classList.add('thisFadeOut'); Я ожидал, что функция: removeStartScreen(); будет вызвана событием animationend: thisFadeOutAnim.Я предполагаю, что removeStartScreen(); вызывается событием animationend rainbowFlashAnim, потому что элементу startScreenContainer назначаются классы thisFadeOut и thisRemove одновременно.Так что thisFadeOutAnim не имеет шансов на запуск.Я искал в Интернете и нашел некоторую информацию об animationName, но не могу понять, как реализовать эту концепцию.Или я просто все делаю не так !?

Мой вопрос: Есть ли способ добавить прослушиватель событий к событиям определенной анимации?

    var startButton = document.querySelector('#startButton');
    startButton.addEventListener('mouseup', startButtonClicked);
    
    
        function startButtonClicked(){

        startButton.classList.remove('startButtonPulse');
        startButton.classList.add('startButtonClicked');
        startButton.innerHTML = "LET'S GO!";
        startButton.addEventListener('animationend', fadeOutStartScreen);

        function fadeOutStartScreen(){
            var startScreenContainer = document.querySelector('#startScreenContainer');
            startScreenContainer.classList.add('thisFadeOut');
            startScreenContainer.addEventListener('animationend', removeStartScreen);

            function removeStartScreen(){
                   startScreenContainer.classList.add('thisRemove'); 
                }
            }
        }
.startButtonPulse{
    animation: buttonPulseAnim 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    
}

@keyframes buttonPulseAnim {
    0%      {transform: scale(1);}
    12.5%   {transform: scale(1.05);}
    25%     {transform: scale(1);}
    37.5%   {transform: scale(1.05);}
    50%     {transform: scale(1);}
}

.startButtonClicked{
    animation: rainbowFlashAnim 0.5s;
    animation-iteration-count: 4;
    animation-fill-mode: forwards;
}

@keyframes rainbowFlashAnim{
    20%      {background: cyan;}
    40%      {background: lime;}
    60%      {background: magenta;}
    80%      {background: red;}
}

.thisFadeOut {
    animation-name: thisfadeOutAnim;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes thisfadeOutAnim {
    from    {opacity: 1;}
    to      {opacity: 0;}
}

.thisRemove {
    display: none !important;
}

Ответы [ 2 ]

0 голосов
/ 04 марта 2019

Хорошо, вот я и выработал способ: 

element.addEventListener('animationend', function(e){
    if(e.animationName === 'nameOfYourAnimation'{
        //do something...
    }
});

Прекрасно !!

0 голосов
/ 03 марта 2019

Я не проверял это, но я не могу прикрепить событие к какой-либо анимации.

Я думаю, вы должны сделать это следующим образом

btn1 нажал кнопку огня function1 function1: startanimation1 в течение 2 с после 2 с вызов функции function2 (пользователь setTimeout)

function2: запуск анимации 2 в течение 1 с после 1 с вызывает другую функцию

...