обратный вызов jkery html5 webkit-animation - PullRequest
Новая
       15

обратный вызов jkery html5 webkit-animation

2 голосов
/ 13 февраля 2012

Есть ли обратный вызов на завершение webkit-анимации? см. пример 

@-webkit-keyframes "blink" {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.animate {
    background: #000;
    height: 100px;
    width: 100px;
    opacity: 0;
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease;
}​

$("div").bind("webkitTransitionEnd", function() {
  alert(1);
}).addClass("animate");​

Но этот обратный вызов не работает

1 Ответ

2 голосов
/ 07 февраля 2013

Это поможет:

element.addEventListener('webkitAnimationEnd', function(event) { });

в Firefox событие называется 'animationend', но некоторые браузеры webkit будут слушать оба из них.Вместо этого, если вы используете jquery, вы можете использовать

$element.on('webkitAnimationEnd animationend' , function(event){ });

Обновление:

Недавно у меня произошел небольшой сбой при использовании .one('webkitAnimationEnd animationend'), так как обасобытия прослушиваются в chrome, но одновременно запускается только одно, одна и та же функция будет срабатывать дважды при двух отдельных конечных событиях анимации.

Вместо небольшого трюка можно использовать функцию, подобную этой: 

getTransitionEndEvent : function(){
    switch(this._currentBrowser){
        case enums.Browser.SAFARI:
        case enums.Browser.CHROME:
            return "webkitTransitionEnd";
        case enums.Browser.FIREFOX:
            return "transitionend";
        default:
            console.log("unknown browser agent for transition end event");
            return "";
    }
}

и добавьте при необходимости дополнительные префиксы, специфичные для поставщика.

Чтобы идентифицировать браузер, я действительно могу порекомендовать следующее:

Как определить Safari, Chrome,IE, Firefox и браузер Opera?

...