Javascript 动作怪异的CSS动画_Javascript_Html_Css_Css Animations

Javascript 动作怪异的CSS动画

javascript html css

Javascript 动作怪异的CSS动画,javascript,html,css,css-animations,Javascript,Html,Css,Css Animations,从事一个爱好项目，学习一些html、css和js 一直在试图解决一个css动画行为怪异的问题。第一次迭代后，它有时出现或消失在动画的中间，而其他时候它只是快速闪烁。在多个浏览器和多台计算机/设备中进行了尝试，结果都是一样的 JSFIDLE（删除了一些代码）和实例 index.html ... <body onload="init()"> <div class="leftanimation">Cool Gliding Text</div> <div cla

从事一个爱好项目，学习一些html、css和js

一直在试图解决一个css动画行为怪异的问题。第一次迭代后，它有时出现或消失在动画的中间，而其他时候它只是快速闪烁。在多个浏览器和多台计算机/设备中进行了尝试，结果都是一样的

JSFIDLE（删除了一些代码）和实例

index.html

...
<body onload="init()">
<div class="leftanimation">Cool Gliding Text</div>
<div class="leftanimation">Lorem Ipsum Dolor Sit</div>
<div class="leftanimation">How Cool Is This?</div>
<div class="leftanimation">Wwiiiieeee! </div>
<div class="leftanimation">Sssssswwwwoooosssshhh!</div>
<div class="leftanimation">Drive by text!</div>
<div class="leftanimation">More example text ...</div>
<div class="leftanimation">Last test text.</div>
...

你知道为什么会这样吗

更新

如果我从

updateAnim（）

中删除

animationDuration

，这种奇怪的行为似乎就会消失。但是，这并不能解决我的问题，因为我希望动画随机化。

可能css动画处理起来太多了？

只是一些提示：如果使用addEventListener（），您应该将它们收集到一个数组中，以便在需要时删除它们

var eventListener = [];
element.addEventListener(event,callback,false);
eventListener.push([element,event,callback]);

要删除它们，只需在阵列上循环：

while(var current = eventListener.pop()){
    current[0].removeEventlistener(current[1],current[2]);
}

这只是为了从一开始就学会它

以及：

应该是

Math.floor(Math.random() * 2) === 1

如果我看到更正，则在设置animationDirection时会出现问题。它将状态切换到css给定的默认状态，然后以相反的顺序运行新动画

尝试隐藏元素并设置动画开始位置的起始位置。之后，显示元素并开始动画。也许可以将animationStart包装在

setTimeout(function(){
  // setAnimationProperty etc
},0);

您可以使用

Math.random（）<0.5

@user2429266来代替

Math.floor（Math.random（）*2）==1

，谢谢您的提示，非常感谢。动画是背景的一部分，所以我会很懒，不会删除eventlisteners。我知道，资源处理很重要。在我开始改变动画方向之前，问题就出现了。在我更改属性之前隐藏文本似乎也不起作用（但我不确定是否正确隐藏）。@vahanpwns我会使用它，但我会将其更改为

hehe。

Math.random（）

返回一个从0到小于1的数字，所以我真的建议

@vahanpwns不要让这两种技术存在0.0001%的差异，或者会发生一些非常糟糕的事情。
Math.floor(Math.random() * 2) == 1 

Math.floor(Math.random() * 2) === 1 

setTimeout(function(){
  // setAnimationProperty etc
},0);