Question

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

事件（点按）我想用-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）的swing动画，但结果相同：

@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);
});

Answer 2

你可以使用addclass和removeclass，但你的代码中有一个错误。你正在同时做addclass和removeclass。所以，动画不会发生或只发生一次所以尝试setTimeout：

$("#imgdiv").on('click', function(e){
    $("#imageID").addClass("swing animated");
    setTimeout(function(){
        $("#imageID").removeClass("swing animated");
    },1000)
});

我在jsfiddle中做到了 - http://jsfiddle.net/tqn394k9/

旋转图像2次

2 个答案: