更新Javascript中的动画持续时间 [英] Updating animation-duration in Javascript

问题描述

通过更改 animation-duration （或在本例中为 -webkit-animation-duration ）属性后带有 setProperty（-webkit-animation-duration，value + s）的JavaScript，我看到了Chrome中元素检查器的变化，但实际的动画速度却没有没改变。另外，如果我在元素检查器中手动更改该值，则也不会更改。

After changing the animation-duration (or in this case, -webkit-animation-duration) property via JavaScript with setProperty("-webkit-animation-duration", value + "s"), I see the change in the element inspector in Chrome, but the actual animation speed doesn't change. In addition, if I manually change the value in the element inspector, there is no change either.

我已经设置了一个输入字段来获取动画速度值，它连接到以下事件侦听器（ orbitFactor 是在其他位置定义的全局变量）：

I've got an input field set up to take an animation speed value, which is connected to the following event listener (orbitFactor is a global var defined elsewhere):

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 ，我在这里缺少什么吗？我使用相同方法更改的其他属性（例如，宽度和高度）确实发生了明显变化。

The event listener is definitely getting called, and the -webkit-animation-duration value does change in the element inspector, but the speed of the animation doesn't. Is there something I'm missing here with regards to -webkit-animation-duration? The other properties I'm changing (e.g. width and height) using the same method do change visibly.

预先感谢

编辑：请注意，这在Chrome 40中是一个问题，但在Chrome 42和Firefox 35。

Note that this is a problem in Chrome 40, but it works properly in Chrome 42 and Firefox 35.

推荐答案

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

Setting the style element directly using the [] to access either the vendor-prefixed or native css prop. will allow you to re-apply the animation duration property and change the rotational speed of the planet. No jquery needed. It's also worth mentioning that at the time of writing Firefox supports a non-prefixed version of the css property, while there is either mixed support or vendor-prefix support for other browsers. If considering using these animations, a given developer should seriously consider their potential user-base and probably not make this a core feature of web app. See more support info here:

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

Le代码：

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

这篇关于更新Javascript中的动画持续时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！