我正在尝试创建一个CSS动画,当用户点击元素时它会向右移动,再次点击后会向左移动。问题是这样会出现闪烁。我知道原因,但不确定最好的解决方法。我希望找到最优雅的解决方案。
我在这里设置了jsFiddle(仅限于WebKit):http://jsfiddle.net/4Ad5c/2/ CSS:
JavaScript代码:
当您点击“向右动画”时,它按预期工作,但是当您点击“向左动画”时,它会闪烁到左边,然后再按预期进行动画。原因是您必须删除类并添加另一个以再次运行动画,但我不知道使其正常工作的最佳方法。我想我可以在删除先前动画时添加一个类,该类将其保留在当前状态,但我认为这样做是错误的。
感谢您的帮助!
我在这里设置了jsFiddle(仅限于WebKit):http://jsfiddle.net/4Ad5c/2/ CSS:
.animateRight{
-webkit-animation: goRightLeft 1s;
-webkit-animation-fill-mode: forwards;
}
.animateLeft{
-webkit-animation: goRightLeft 1s;
-webkit-animation-fill-mode: backwards;
-webkit-animation-direction: reverse;
}
@-webkit-keyframes goRightLeft {
0%{margin-left: 0px;}
100%{margin-left: 100px;}
}
JavaScript代码:
this.animateBox = function(className){
var box = document.getElementsByClassName('box')[0];
box.className = "box";
setTimeout(function(){
box.className = "box " + className;
},1);
};
当您点击“向右动画”时,它按预期工作,但是当您点击“向左动画”时,它会闪烁到左边,然后再按预期进行动画。原因是您必须删除类并添加另一个以再次运行动画,但我不知道使其正常工作的最佳方法。我想我可以在删除先前动画时添加一个类,该类将其保留在当前状态,但我认为这样做是错误的。
感谢您的帮助!