jquery - 使用 jquery 和输入范围增加 CSS 动画旋转持续时间

Question

我使用 -webkit-animation 属性来旋转元素，但我想使用 jQuery 和输入范围来控制该持续时间。

然而，它不起作用，似乎无法弄清楚为什么。

$('#speed').change(function() {
    $('.rotate').css({'-webkit-animation': 'rotation '+this.value+'s linear infinite'});
});

Fiddle here

Answer 1

你需要使用 requestAnimationFrame 方法，它比添加和删除动画关键帧更容易控制，这并不难，但更难的是修改那些 css 动画和/或创建新的动画。

然而，此 js 函数 requestAnimationFrame 类似于 setTimeInterval，但它仅在屏幕可以呈现时调用，因此不会不必要地浪费 cpu。

http://jsfiddle.net/BZLGE/10/ <<

var spd=0, r=0, box = $('.rotate');

$('#speed').on('change', function () {
    spd = +(this.value);
});

function start() {
    r += spd;
    box.css('transform', 'rotate(' + r + 'deg)');
    requestAnimationFrame(start);
}
start();