如何知道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動畫何時結束

回答

相關問題