鉻的addEventListener動畫事件

Question

greenfloyd.org

下面的代碼，除了谷歌瀏覽器一切正常（Safari瀏覽器未測試）。我認爲這個問題是在需要給addEventListener註冊...

**e.addEventListener("animationiteration", listener, false);** 

火bmViewer（）函數

HTML：

<div id = **"bmImageDiv"** style = "top:0; left:0; right:0; height:350px; text-align:center; position:absolute; margin:.5em; border-bottom:solid .10em green; resize:both;"> 

<img id = "bmIcon" src = "http://greenfloyd.org/images/bookmark.png" alt="bm icon" height = "24" width = "24" title = "poster,timestamp" style = "top:0; left:0; height:25px; width:25px; position:absolute;"> 

<a href = "javascript:void(0)" id = "bmViewerImageLink" rel = "enclosure" type = "image/*" target = "_blank" title = "click to view image at original size."> 

<img id = "bmViewerImageSrc" src = "http://greenfloyd.org/images/bookmark.png" alt="bm image" height = "95%" width = "95%"> 

</a> 
</div> 

JS：

window.onload=function() 
{ 
var e = document.getElementById(**"bmImageDiv"**); 
e.addEventListener("animationstart", listener, false); 
e.addEventListener("animationend", listener, false); 
e.addEventListener("animationiteration", listener, false); 
. 
. 
. 
} 

function listener(e) 
{ 
switch(e.type) 
{ 
case "animationstart": 
actionLog("Started: elapsed time is " + e.elapsedTime); 
break; 
case "animationend": 
actionLog("Ended: elapsed time is " + e.elapsedTime); 
break; 
case "animationiteration": 
actionLog("New loop started at time " + e.elapsedTime); 
var index = document.getElementById("bmNext").value; 
bmViewer(index); 
break; 
default: 
actionLog(e.type+", "+document.getElementById"bmImageDiv").style.animationPlayState); 
document.getElementById("bmImageDiv").className = "play"; 
} 
} 

CSS3動畫：

@keyframes bmview { from {opacity:0.0; } to {opacity:1.0;} } 
@-webkit-keyframes bmview { from {opacity:0.0;} to {opacity:1.0;} } 
@-moz-keyframes bmview { from {opacity:0.0;} to {opacity:1.0;} } 
@-o-keyframes bmview { from {opacity:0.0;} to {opacity:1.0;} } 

.paused 
{ 
-webkit-animation-play-state:paused; 
-moz-animation-play-state:paused; 
-o-animation-play-state:paused; 
animation-play-state:paused; 
} 
.play 
{ 
animation: bmview 7s linear 0s infinite; 
-webkit-animation: bmview 7s linear 0s infinite; 
-moz-animation: bmview 7s linear 0s infinite; 
-o-animation: bmview 7s linear 0s infinite; 

-webkit-animation-play-state:running; 
-moz-animation-play-state:running; 
-o-animation-play-state:running; 
animation-play-state:running; 
} 

Answer 1

在基於webkit的瀏覽器中，事件animationStart, animationIteration, etc.的前綴爲webkit。 所以，只需添加您的eventlisteners也爲事件webkitAnimationStart, webkitAnimationEnd, webkitAnimationIteration，你應該很好。

參考去here，也請注意歌劇和IE10