Событие анимации не запускается, когда анимация действительно заканчивается - PullRequest
Новая
       7

Событие анимации не запускается, когда анимация действительно заканчивается

0 голосов
/ 05 июля 2018

эта штука сводит меня с ума.

У меня есть эта анимация: 

.animated-debug {
    -webkit-animation-duration: 5s;
            animation-duration: 5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}
@-webkit-keyframes bounceInAlt {
    from, 70%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
                animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0, 0, 0);
                transform: scale3d(0, 0, 0);
    }
    70% {
        -webkit-transform: scale3d(1.01, 1.01, 1.01);
                transform: scale3d(1.01, 1.01, 1.01);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceInAlt {
    from, 70%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
                animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0, 0, 0);
                transform: scale3d(0, 0, 0);
    }
    70% {
        -webkit-transform: scale3d(1.01, 1.01, 1.01);
                transform: scale3d(1.01, 1.01, 1.01);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

.bounce-in-alt {
    -webkit-animation-name: bounceInAlt;
            animation-name: bounceInAlt;
}

и это javascript для получения события окончания анимации: 

 $("#my_id").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
        console.log("Entrato in animation end.");
    });

Проблема в том, что это событие запускается до того, как анимация действительно заканчивается, я ожидаю, что оно будет запущено через 5 секунд и только один раз, вместо этого он срабатывает через одну секунду после запуска анимации и несколько раз.

Что я делаю не так?

EDIT

После тестирования некоторых решений выясняется, что проблема привела к использованию: 

document.addEventListener("DOMContentLoaded", function() { ... });

в качестве оболочки для скрипта, вместо этого используйте jQuery's: 

$(document).ready(function() { ... });

, поскольку обёртка полностью решила проблему.

Действительно неожиданное поведение, у некоторых других была такая же проблема?

1 Ответ

0 голосов
/ 05 июля 2018

Я сделал jsfiddle, и ваш код работает хорошо для меня, см. https://jsfiddle.net/qt8znvsx/4/ Я не уверен, что HTML-код правильный, потому что вы не дали его нам, не могли бы вы посмотреть, пожалуйста 

<div id="my_id">
    <div class="animated-debug bounce-in-alt">
        Helloo is it me? You're looking for
    </div>
</div>

Я проверял это на Chrome и Firefox.

...