Question

我在firefox中使用一些css动画时遇到了一些问题。当用户单击按钮时，我正在使用它们滑入一些单选按钮。在chrome中，一切似乎都很好，但是在firefox中，它们看起来像是两次触发动画（第二个稍微超过第一个）。我尝试了一些事情似乎无法解决这个问题。这就是我正在做的事情：

$(document).on("click", ".addLesson", function(){
    $(".contentList").addClass("fadeOutRight");
    $(".contentList").hide();
    $(".lessonOptions").addClass("fadeInLeft");
});

$(document).on("click", ".lessonCancel", function(){
    $(".contentList").removeClass("fadeOutRight");
    $(".contentList").addClass("fadeInLeft");
    $(".contentList").show();
    $(".lessonOptions").removeClass("fadeInLeft");
    $(".lessonOptions input[type='radio']").removeAttr("checked");
});

我只是为动画本身使用animate.css样式 -

.fadeInLeft 
-webkit-animation: fadeInLeft 1s forwards
animation: fadeInLeft 1s forwards

@-webkit-keyframes fadeInLeft
0%
    opacity: 0
    -webkit-transform: translate3d(-100%, 0, 0)
    transform: translate3d(-100%, 0, 0)
100%
    opacity: 1
    -webkit-transform: none
    transform: none
@keyframes fadeInLeft
0%
    opacity: 0
    -webkit-transform: translate3d(-100%, 0, 0)
    transform: translate3d(-100%, 0, 0)
100%
    opacity: 1
    -webkit-transform: none
    transform: none

.fadeOutRight
-webkit-animation: fadeOutRight 1s 
animation: fadeOutRight 1s

@-webkit-keyframes fadeOutRight
0%
    opacity: 1
100%
    opacity: 0
    -webkit-transform: translate3d(2000px, 0, 0)
    transform: translate3d(2000px, 0, 0)

@keyframes fadeOutRight
0%
    opacity: 1
100%
    opacity: 0
    -webkit-transform: translate3d(2000px, 0, 0)
    transform: translate3d(2000px, 0, 0)

我想也许我正在让javascript和css互相争斗，但我不确定，因为它在Chrome中运行良好。

我也注意到，当我将鼠标移到lessOptions div上时，我滑入（在它进入舞台之后）它会闪烁或闪烁。

感谢您的帮助，感谢您的帮助!!

笔在这里 - http://codepen.io/anon/pen/IkhGp

Answer 1

所以对我来说，发生此问题是因为我的动画持续了0.5秒，并且过渡了：全为1；以及在我的动画元素上，这导致动画触发两次。删除过渡并保留动画本身对我来说是个问题。

Css动画两次射击，＆＃34;闪烁＆＃34;在Firefox中

1 个答案: