0

我正在使用关键帧动画旋转 div 并且工作正常。当 div 旋转时，我正在等待服务器响应，一旦收到响应（这将是一个角度），我想在该特定角度停止 div。

我试图删除正在动画的类，但是当我这样做时，div 会通过视觉轻弹回到其原始位置，然后在我需要的位置休息。

这是该http://jsfiddle.net/bVkwH/3/的 jsFiddle

jQuery :

$("#stop").click(function () {
    var pos = $(".pos").val();
    $("#bg > img").removeClass('animate');
    $("#bg > img").css({
        '-webkit-transform': 'rotate(' + pos + 'deg)'
    });
    $("#bg > img").css({
        '-moz-transform': 'rotate(' + pos + 'deg)'
    });
});

$("#start").click(function () {
    $("#bg > img").addClass('animate');        
});

CSS： 

#bg {
    height: 500px;
    width: 500px;
    overflow:hidden;
}
#bg > img {
    -webkit-transition: 2s;
    -moz-transition: 2s;
}
#bg > img.animate {
    -webkit-animation: spinIt 6s infinite linear;
    -moz-animation: spinIt 6s infinite linear;
}
@-webkit-keyframes spinIt {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spinIt {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

任何解决方案..我希望它可以在 iPad 浏览器上运行..提前谢谢！

4

1 回答 1

1

设置 css 属性后删除类动画。

编辑：正如理查德指出的那样，它不起作用。获得价值是可能的，但是在动画的最后部分需要一些从矩阵到度的对话。

$("#stop").click(function () {
    var iimg = $("#bg > img");
    // get current transformation
    var ccss = getComputedStyle(iimg.get(0));
    var matrix = ccss.getPropertyValue('transform') || ccss.getPropertyValue('-moz-transform') || ccss.getPropertyValue('-webkit-transform');
    // get wanted new value
    var pos = $(".pos").val();

    // stop css transformation
    iimg.removeClass('transtime');
    iimg.css({
        '-webkit-transform': matrix,
        '-moz-transform': matrix,
        'transform': matrix,
    });
    iimg.removeClass('animate');

为此还需要一些 css 和标记更新。 http://jsfiddle.net/bVkwH/4/

于 2013-08-26T12:05:24.647 回答