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

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

感谢您的帮助！

Answer 1

闪烁的原因：

在设置下一个animationClass之前，您在点击时应用了类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;

};

CSS动画前进然后向后闪烁

1 个答案:

的CSS

脚本

Demo