我发现了一段非常有用的代码,它允许您为元素的旋转设置动画,虽然它对我来说几乎完美,但结果是不稳定的。
$.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 中看到的那样,旋转有效,但在第二次单击按钮时,元素不会简单地再次旋转,它首先被重置,然后旋转。
如何防止这种“重置”发生?
最佳答案
您必须将当前所需的 Angular 存储为下一次点击的起始值:
$.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();
});
首先创建变量,包括新的prevAngle
:
var angle = 0;
var prevAngle = 0
prevAngle
在递增之前获取 Angular
值:
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);
关于jquery - Rails 4 - jQuery 动画旋转 - 几乎可以正常使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32632021/