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/ ＆lt;＆lt;

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();

Answer 2

奇怪，但您可以在更改时重新创建.rotate，这将以新的速度重新启动动画。

Fiddle

$('#speed').on('change', function () {

    var element = $(".rotate"),
    n = element.clone(true);

    element.before(n);

    $(".rotate:last").remove();
    $('.rotate').css("-webkit-animation", "rotate " + (30/this.value) + "s linear infinite");
});

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

2 个答案: