jQuery удалить класс после css анимации играл?

У меня есть код css:

body.start{-webkit-animation:srcb ease-in .4s 1;}

и просто играть один раз, когда пришел на сайт

но проблема в том, что анимация сделана

кнопки на моем сайте не работает

Как удалить класс тела "start" После завершения анимации

или удалить задержку класса x секунд после воспроизведения анимации?

10
animation css html5 jquery webkit

5 ответов

вы можете привязать к transitionend событие (для всех из них, на самом деле):

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).removeClass("start");
    }
);

Если вы хотите реализовать задержку, можно queue () операция удаления класса:

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).delay(1000).queue(function() {  // Wait for 1 second.
            $(this).removeClass("start").dequeue();
        });
    }
);

Примечание: on () существует только с jQuery 1.7, если вы используете более старую версию, вам придется использовать bind () вместо этого для кода выше для работы.

27

попробовать 

webkitAnimationEnd oanimationend msAnimationEnd animationend

вместо 

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd

это работает для меня.

10

возможно, другой способ?

$(window).load(function(){
    setTimeout(function(){
        $('body.start').removeClass('start')
    }, 4000);
});
2

вот код:

var div = document.querySelector('div');

function callback() {
    div.classList.remove('start'); // or modify div.className
}

div.addEventListener("webkitAnimationEnd", callback, false);

проверить это видео на jsbin.

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

1
$("#mydiv").removeClass("start",
    function() {
        alert("do something");
    });
0