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);
};

当您单击 Animate Right 时，它会按预期工作，但是当您单击 Animate Left 时，它会向左闪烁，然后按预期进行动画处理。原因是您必须删除该类并添加另一个类才能使动画再次运行，但我不知道使其正常工作的最佳方法。我想我可以在删除具有当前状态的上一个动画时添加一个类，但这对我来说似乎是错误的。

谢谢您的帮助！

4

1 回答 1

4

闪烁的原因：

在设置下一个动画类之前，您正在单击应用类box，这会使框突然向左移动。然后你正在应用动画来反转。因此，它会在突然向左移动（删除类）时导致闪烁，并且在超时中添加类会导致根据类中的填充模式和方向反转动画，并且由于再次添加边距将其拉到右侧，animateLeft因此变得更加糟糕goRightLeft规则并 webkit-animation-fill-mode: backwards;推到左边。所以我在这里提到的一种方法是反向（增加/减少）边距。

这是一个解决方案：

对于真正的反向动画，您需要像正向动画一样应用从 100px 到 0 的边距减少。所以只需在动画中添加并应用它keyframes。LeftToRight

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;

};

演示

于 2013-06-05T21:38:25.220 回答