Question

我正在创建一个在单击时更改状态的元素，但我希望它转换为具有特定动画的状态。

我已设法实现自定义动画，但在动画完成后，它会一直恢复到原始状态。

这就是我的意思：http://codepen.io/FlyingEmu/pen/vEyLd

有关如何解决此问题的任何想法？

JS代码：

$(document).ready(function () {
   var CardFront = true;
$('.card').click(function () {

  if (CardFront == true) {
    CardFront = false;
    $('#card1').css("animation", "Fly_Out 1s");
    $('#card2').css("animation", "Fly_Out 1s 0.1s");
    $('#card3').css("animation", "Fly_Out 1s 0.2s");
    $('#card4').css("animation", "Fly_Out 1s 0.3s");
  }  
  else {
    CardFront = true;
    $('#card1').css("animation", "Fly_In 1s");
    $('#card2').css("animation", "Fly_In 1s 0.1s");
    $('#card3').css("animation", "Fly_In 1s 0.2s");
    $('#card4').css("animation", "Fly_In 1s 0.3s");
  }
  });
});

Answer 1

在这里：http://jsfiddle.net/DerekL/t4FUG/

因为在-prefix-animation之后，它应用的CSS样式将恢复到其初始状态;因此，您需要再次手动设置其样式。长话短说，当.card为CardFront时，将true添加CSS样式规则。

添加：

.card.flyedOut{
    transform: translateX(0%) rotateY(0deg) translateZ(0px);
}

和

setTimeout(function(){
    $(".card").toggleClass("flyedOut");
}, 1000);

点击事件。

初学者JQuery自定义动画

1 个答案: