如何知道css3动画何时结束

动画结束时，如何从html对象中更改或删除css类？我想，当动画结束时删除一个div ...如何知道css3动画何时结束

.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; 
    } 
}

来源

2012-01-19 Paulo Mendonça

需要Javascript这一点，它使用jQuery容易...

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

来源

2012-01-20 12:34:35 Duopixel

谢谢！正是我需要的！ –

的animationend事件是区分大小写，并因浏览器而异。官方规格全部为小写，尽管各种浏览器前缀在实现中也有所不同。

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

看到这个jsfiddle为live example。

来源

2012-10-18 16:03:48 scurker

谢谢你的例子！ –

谢谢，这是一个很好的例子。奇怪的是 - 如果令人讨厌的话 - IE 11似乎只关注动画结局。 –

事实上animationEnd在IE11中不能及时工作：https://connect.microsoft.com/IE/feedbackdetail/view/1605631/animation-end-events-firing-late – glenatron

接受的答案目前在Chrome中为动画启动两次（当自jQuery 1.7以来的首选方法现在为.on时，它也使用.bind）。大概这是因为它承认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); 
     });

来源

2016-07-14 09:18:11

如何知道css3动画何时结束

回答

相关问题