旋转图像2次

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

您可以使用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/中这样做的

Answer 2

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

您也可以将您的转换放在css中而不是JS中。只需将转换值放在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);
});