javascript - 旋转图像 2 次

Question

有几个关于如何旋转图像的问题，但我想要一个类似动画的旋转。通过一个

event (tap) 我想将图像旋转 -5 度然后旋转 5 度，但是如果我都写旋转

相同的功能(或事件处理程序)，第一个旋转不出现，只有第二个可见。

$("#imgdiv").on('taphold', function(e){
    //$("#imageID").addClass("swing animated");
    $("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(-5deg)"});
    $("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(5deg)"});
    //$("#imageID").removeClass("swing animated");
});

我也尝试了一个带类的摆动动画(addClass，然后是 removeClass)，但结果相同:

@keyframes swing { 
    25% { transform: rotate(-5deg); } 
    50% { transform: rotate(0deg); } 
    75% { transform: rotate(5deg); } 
    100% { transform: rotate(0deg); } 
} 

.swing { 
    transform-origin: top center; 
    animation-name: swing;
}

.animated { 
    animation-duration: 1s;  
    animation-fill-mode: both; 
    animation-timing-function: linear; 
}

Answer 1

您可以将第二个动画放在 setTimeout 中，以便延迟其动画直到第一个动画结束。

您也可以将过渡放在 css 而不是 JS 中。只需将转换值放在 JS 中即可。

尝试这样的事情 SAMPLE .

JS:

$(".clickme").click(function(){
  //animate to -5deg
    $(this).css('transform','rotate(-5deg)');
  //animate to 5deg
    setTimeout(function(){$(".clickme").css('transform','rotate(5deg)')},1000);
  //animate back to root position
 setTimeout(function(){$(".clickme").css('transform','rotate(0deg)')},2000);
});