Question

当我使用它时：

$("#passwordConfig").removeClass('shake animated').addClass('shake animate');

这只适用于ONCE。

我需要添加一些timeOut以使其运行多次！

$("#passwordConfig").removeClass('shake animated');
                    setTimeout(function() {
                        $("#passwordConfig").addClass('shake animated');
                    }, 50);

知道为什么吗？

CSS：

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

Answer 1

这是因为removeClass和addClass发生得如此之快，以至于它不允许DOM按照说法来追赶。如果你真的讨厌setTimeout，你可以做这样的事情：

$("#passwordConfig").removeClass('shake animated').delay(50).queue(
    function (next) {
        $(this).addClass('shake animated');
        next();
    }
);

http://jsfiddle.net/51dwhd2o/

Toggle类也很好，但似乎它只能用于每次切换调用。

jquery：addClass，removeClass：动画只能工作一次：为什么？

1 个答案: