Question

当动画结束时，如何从html对象更改或删除css类？我希望在动画结束时删除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;
    }
}

Answer 1

动画内容事件区分大小写，因浏览器而异。官方规范都是小写的，尽管各种浏览器前缀的实现也各不相同。

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

请参阅此jsfiddle获取live example。

Answer 2

你需要Javascript，使用jQuery更容易......

$(document).ready(function(){
  $('.loginAnimado').bind("webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd", function(){
     $(this).removeClass('loginAnimado');
  });  
});

Answer 3

目前已接受的答案会针对Chrome中的动画触发两次（当jQuery 1.7的首选方法现在为.bind时，它也会使用.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);
        });

如何知道css3动画何时结束

3 个答案: