Rails 4 - jQuery 动画旋转 - 几乎功能答案

【问题标题】：Rails 4 - jQuery animate rotate - almost functionalRails 4 - jQuery 动画旋转 - 几乎功能
【发布时间】：2015-12-14 10:08:35
【问题描述】：

我发现了一段非常有用的代码，它可以让您对元素的旋转进行动画处理，虽然它对我来说几乎完美无缺，但结果却令人毛骨悚然。

$.fn.animateRotate = function(angle, duration, easing, complete) {
    var args = $.speed(duration, easing, complete);
    var step = args.step;
    return this.each(function(i, e) {
        args.complete = $.proxy(args.complete, e);
        args.step = function(now) {
            $.style(e, 'transform', 'rotate(' + now + 'deg)');
            if (step) return step.apply(e, arguments);
        };

        $({deg: 0}).animate({deg: angle}, args);
    });
};

$(".glyphicon-remove").on("click", function() {
    $(this).animateRotate(45, 1000);
    preventDefault();
});

正如在我的 jsFiddle 中看到的那样，旋转是有效的，但是在第二次单击按钮时，元素不会再次旋转，而是先重置，然后再旋转。

如何防止这种“重置”发生？

https://jsfiddle.net/rnqzdLc9/3/

【问题讨论】：

标签： jquery css ruby-on-rails animation rotation

【解决方案1】：

您必须将当前所需的角度存储为下次点击的起始值：

$.fn.animateRotate = function(angle,prevAngle, duration, easing, complete) {
    var args = $.speed(duration, easing, complete);
    var step = args.step;
    return this.each(function(i, e) {
        args.complete = $.proxy(args.complete, e);
        args.step = function(now) {
            $.style(e, 'transform', 'rotate(' + now + 'deg)');
            if (step) return step.apply(e, arguments);
        };

        $({deg: prevAngle}).animate({deg: angle}, args);
    });
};
var angle = 0;
var prevAngle = 0

$(".glyphicon-remove").on("click", function(e) {
    prevAngle = angle
    angle +=45;
    $(this).animateRotate(angle, prevAngle, 1000);
    e.preventDefault();
});

Updated Fiddle

首先创建vars，包括新的prevAngle:

var angle = 0;
var prevAngle = 0

prevAngle在递增之前获取angle 值：

prevAngle = angle
angle +=45;

发送/获取 prevAngle 到 animateRotate 函数：

$(this).animateRotate(angle, prevAngle, 1000);

还有

$.fn.animateRotate = function(angle,prevAngle, duration, easing, complete) {
...
}

最后从prevAngle 值动画旋转：

$({deg: prevAngle}).animate({deg: angle}, args);

【讨论】：