как узнать когда заканчивается анимация css3 - PullRequest
1 голос
/ 19 января 2012

Как мне изменить или удалить класс css из html-объекта, когда анимация заканчивается?Я хотел бы удалить div, когда анимация заканчивается ...

.loginAnimado
{        
    width:100px;
    height:100px;
    background:#F2F2F2;
    position:relative;            
    -webkit-animation:mymove 1s 1; /* Safari and Chrome */
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    from 
    {                       
    }

    to 
    {        
        opacity: 0.0;    
        -webkit-transform: scale(2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);               
        display:none;
    }
}

Ответы [ 3 ]

6 голосов
/ 18 октября 2012

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

Mozilla: mozAnimationEnd
Webkit: webkitAnimationEnd
Opera: oanimationend
IE: MSAnimationEnd
W3C: animationend

См. Этот jsfiddle для живого примера .

3 голосов
/ 20 января 2012

Для этого вам нужен Javascript, с jQuery это проще ...

$(document).ready(function(){
  $('.loginAnimado').bind("webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd", function(){
     $(this).removeClass('loginAnimado');
  });  
});
1 голос
/ 14 июля 2016

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

/* From Modernizr */
function whichTransitionEvent(){

    var el = document.createElement('fakeelement');
    var transitions = {
        'animation':'animationend',
        'OAnimation':'oAnimationEnd',
        'MSAnimation':'MSAnimationEnd',
        'WebkitAnimation':'webkitAnimationEnd'
    };

    for(var t in transitions){
        if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

$("#elementToListenTo")
    .on(whichTransitionEvent(),
        function(e){
            // What you want to do here
            $('.loginAnimado').removeClass('loginAnimado');
            $(this).off(e);
        });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...