用Javascript更新动画持续时间

Question

在通过JavaScript使用更改animation-duration（或在本例中为-webkit-animation-duration）属性后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

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

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