初學jQuery自定義動畫

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樣式將恢復到初始狀態;因此，您需要再次手動設置其樣式。長話短說，當CardFront是true時，將一個CSS樣式規則添加到.card。

地址：

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

和：

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

點擊事件。