使用javascript重置动画的问题

时间:2013-08-13 01:46:18

标签: javascript animation addeventlistener

我的AnimationEnd代码无法正常运行。 EventListener正在触发但不是AnimationEnd重置。我已经将它缩小到EventListener中的这段代码 EventListener就像我用它调用一个警告框一样工作,有问题的代码可以工作并发布在我写的另一个页面上。
我的一个问题是我不确定该行的命令行属性 如果有帮助的话,我已将整个脚本放在EventListener代码下面,正如我所说,问题出现在下面突出显示的这一小段代码中。

s5.addEventListener( 'MSAnimationEnd', function( slideshow ){

这是不正确但可以在单个动画调用中使用的pice。我怀疑它与最后一部分 s5()有关。我们在那里做什么。

  this.style.MSAnimationName="none";s5();
 }, false);

这是整个脚本。我已经更新了这个,并尽我所能调试它。我可以打电话给警报但不要休息。

 var count = 0;
function slide_show() {
 var  so=document.getElementById("s0");
  var slides = document.getElementsByClassName("s"),
i = slides.length-10;
if (count < i) 
{     
 slides[count].style.animation="slideshow cubic-bezier(0.9,0.9,0.9,0.9) 1s 1 ",
      slides[count].style.webkitAnimation="slideshow cubic-bezier(0.9,0.9,0.9,0.9)  1s 1 ",   
  slides[count].style.position="fixed",
 count++;

 setTimeout(slide_show, 1200);
so.style.visibility = "hidden",
so.style.position="absolute" ;
} 
else if(   so.style.visibility =="hidden" &&
so.style.position=="absolute")
{
 so.style.visibility = "visible",
so.style.position="static";

}
 }
  function cssAnimationEnd() 
  {
 var s = document.getElementsByClassName("s");
var  s5=document.getElementById("s5");
s5.addEventListener( 'webkitAnimationEnd', function(slideshow){alert("duck");}, false),
s5.addEventListener("animationend",function(slideshow){alert("duck");}, false);
 s5.addEventListener("MSAnimationEnd",function(slideshow){ alert("duck");},   false);
s5.addEventListener("oAnimationEnd",function(slideshow){**this.style.oAnimationName = "none";s5();**}, false);
}

动画效果很好但只有一次。

上面讨论的行不会重置动画的浏览器默认设置。如果您愿意,浏览器默认为一次运行或循环,因此在调用动画后必须重置它。我知道这是因为我以前经历过这个。我知道eventlistener正在工作,因为它会调用一个警告框。 因此我怀疑这个问题与我通过类而不是元素Id调用动画的事实有关,因为默认情况下动画运行15次,对于类中的每个图片运行一次。 因此,我要么需要调整有问题的代码行,要么以不同的方式重置浏览器动画默认值。 我怀疑第一个想法是可行的,但我不像我在诊断问题时那样擅长编写脚本行。 请,任何人的任何想法将非常感谢和真正需要。 我正在研究不同的修复程序,但是这段代码很灵活,问题有#!$$#!关闭所以现在我更加坚定地解决它。 感谢

0 个答案:

没有答案