1

greenfloyd.org

以下代码在除 Google Chrome(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;
}
4

1 回答 1

1

在基于 webkit 的浏览器中,事件animationStart, animationIteration, etc.的前缀是webkit. 因此,只需为事件添加您的事件侦听器webkitAnimationStart, webkitAnimationEnd, webkitAnimationIteration,您应该会很好。

参考在这里,请注意Opera和IE10的不同前缀

于 2013-07-30T16:07:27.607 回答