-1

我正在创建一个在单击时更改状态的元素，但是我希望它通过特定的动画转换到该状态。

我已经设法实现了自定义动画，但是在动画完成后，它会不断恢复到原始状态。

这就是我的意思：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");
  }
  });
});
4

1 回答 1

1

给你：http: //jsfiddle.net/DerekL/t4FUG/

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

添加：

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

和：

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

到点击事件。

于 2013-07-20T04:55:33.690 回答