更新动画持续时间 Javascript

Question

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

我已经设置了一个输入字段来获取动画速度值，它连接到以下事件侦听器（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动画或更改其参数并不容易。但是，我发现了一些技巧。请参见以下代码。我将动画参数分离到我添加/删除的 class 中。再加上在 CSS-Tricks article 中发现的技巧，它起作用了：

$(document).ready(function() {
  $('#slow-btn').click(function(){
    $('#testdiv').removeClass("testanimation");
    $('#testdiv').css("-webkit-animation-duration", "5s");
    $('#testdiv').get(0).offsetWidth = $('#testdiv').get(0).offsetWidth;
    $('#testdiv').addClass("testanimation");
  });
  $('#fast-btn').click(function(){
    $('#testdiv').removeClass("testanimation");
    $('#testdiv').css("-webkit-animation-duration", "1s");
    $('#testdiv').get(0).offsetWidth = $('#testdiv').get(0).offsetWidth;
    $('#testdiv').addClass("testanimation");
  });
});

#testdiv {
    display: block;
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
    background: red;
}
.testanimation {
    -webkit-animation: myanimation 2s linear alternate infinite;
    animation: myanimation 2s linear alternate infinite;
}
@-webkit-keyframes myanimation {
    from {left: 100px;}
    to {left: 400px;}
}
@keyframes myanimation {
    from {left: 100px;}
    to {left: 400px;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='testdiv' class='testanimation'></div>
<input id='slow-btn' type='button' value='slow' />
<input id='fast-btn' type='button' value='fast' />

Answer 2

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

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

Answer 3

在w3c标准中，它没有提到我们可以改变动画持续时间。所以这一切都取决于 explorer.chrome 是的，但不是。所以，当我们想改变时间时，我们应该更新整个动画。

var animation = 'animationName time linear infinite'; var $element= $('selector').css('animation', 'none'); setTimeout(function(){ $element.css('animation', animation); }); 这项工作适用于 IE

更新动画持续时间 Javascript

Updating animation-duration in Javascript

javascript

css

animation

webkit-animation