javascript - CSS动画向前然后向后闪烁

Question

我正在尝试创建一个 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);
};

当您单击“向右动画”时，它会按预期工作，但是当您单击“向左动画”时，它会向左闪烁，然后按预期进行动画。原因是你必须删除类并添加另一个类才能让动画再次运行，但我不知道让这个工作的最佳方法。我想我可以在删除处于当前状态的先前动画时添加一个类，但这对我来说似乎是错误的。

感谢您的帮助!

Answer 1

闪烁的原因:

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

这是一个解决方案:

对于真正的反向动画，您需要应用从 100 像素递减到 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;

};

Demo