javascript - 在 Javascript 中更新动画持续时间

Question

通过 JavaScript 使用 setProperty("-webkit-animation -duration", value + "s")，我在 Chrome 的元素检查器中看到了变化，但实际动画速度没有变化。此外，如果我手动更改元素检查器中的值，也没有任何变化。

我已经设置了一个输入字段来获取动画速度值，它连接到以下事件监听器(orbitFactor 是在别处定义的全局变量):

function updateSpeed(event) {
     var planetDiv = document.getElementById(event.target.id);
     planetDiv.style.setProperty("width", event.target.value / orbitFactor);
     planetDiv.style.setProperty("height", event.target.value / orbitFactor);
     planetDiv.style.setProperty("-webkit-animation-duration", event.target.value + "s");
}

事件监听器肯定会被调用，-webkit-animation-duration 值在元素检查器中确实发生了变化，但动画的速度没有变化。关于 -webkit-animation-duration，我在这里遗漏了什么吗？我使用相同方法更改的其他属性(例如 width 和 height)确实发生了明显变化。

提前致谢

编辑:请注意，这是 Chrome 40 中的一个问题，但它在 Chrome 42 和 Firefox 35 中可以正常工作。

Answer 1

直接使用 [] 设置样式元素以访问 vendor 前缀或 native css prop。将允许您重新应用动画持续时间属性并更改行星的旋转速度。不需要 jquery。还值得一提的是，在撰写本文时，Firefox 支持 css 属性的无前缀版本，而其他浏览器则提供混合支持或 vendor 前缀支持。如果考虑使用这些动画，给定的开发人员应该认真考虑他们的潜在用户群，并且可能不将其作为网络应用程序的核心功能。在此处查看更多支持信息:

http://caniuse.com/#feat=css-animation

代码:

orbitFactor = 1e6

function updateSpeed(event) {
    var orbitDiv = document.getElementById("Mercury-orbit");
    orbitDiv.style["-webkit-animation-duration"] = event.target.value + "s";
}

function updateDiameter(event) {
    var planetDiv = document.getElementById("Mercury");
    planetDiv.style["width"] = event.target.value + "px";
    planetDiv.style["height"] = event.target.value + "px";
}

document.getElementById("orbit-period").addEventListener("change", updateSpeed);
document.getElementById("planet-diameter").addEventListener("change", updateDiameter);