CSS动画正向再反向闪烁

Question

CSS动画正向再反向闪烁

4

我正在尝试创建一个CSS动画，当用户点击元素时它会向右移动，再次点击后会向左移动。问题是这样会出现闪烁。我知道原因，但不确定最好的解决方法。我希望找到最优雅的解决方案。

我在这里设置了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);
};

当您点击“向右动画”时，它按预期工作，但是当您点击“向左动画”时，它会闪烁到左边，然后再按预期进行动画。原因是您必须删除类并添加另一个以再次运行动画，但我不知道使其正常工作的最佳方法。我想我可以在删除先前动画时添加一个类，该类将其保留在当前状态，但我认为这样做是错误的。

感谢您的帮助！

- Matt Landers

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PSL · Accepted Answer

闪烁的原因：

在设置下一个动画类之前，您在单击时应用了 box 类，这使得盒子突然向左移动。然后，您应用了相反的动画。因此，在它突然向左移动（移除类）和在超时中添加类时，会引起闪烁，animateLeft 类中的填充模式和方向会按反序播放动画，并使其更加糟糕，因为 goRightLeft 再次添加边距，由于规则中的边距而将其拉向右侧，并且 webkit-animation-fill-mode: backwards; 将其推向左侧。因此，我在此提到的一种方法是进行相反操作（添加/减少）边距。

这里有一个解决方案：

对于真正的相反动画，您需要应用从100px减少到0的边距，就像正向动画一样。因此，只需为 LeftToRight 添加 keyframes 并将其应用于动画即可。

Css

.animateRight{
    -webkit-animation: goRightLeft 1s;
    -webkit-animation-fill-mode: forwards;
}
.animateLeft{
    -webkit-animation: goLeftRight 1s; /* Note the goLeftRight animation */
      -webkit-animation-fill-mode: backwards;


}
@-webkit-keyframes goRightLeft {
    0%{margin-left: 0px;}
    100%{margin-left: 100px;}
}

@-webkit-keyframes goLeftRight { /* Note the new keyframes rule for reverse animation*/
    0%{margin-left: 100px;}
    100%{margin-left: 0px;}
}

脚本

this.animateBox = function(className){
    var box = document.getElementsByClassName('box')[0];
    box.className = "box " + className;

};

CSS动画正向再反向闪烁

Css

脚本

演示