在 Javascript 中更新动画持续时间

Updating animation-duration in Javascript

本文关键字：动画 持续时间 更新 Javascript      更新时间：2023-09-26

通过 setProperty("-webkit-animation-duration", value + "s") JavaScript 更改 animation-duration（或在本例中为 -webkit-animation-duration）属性后，我看到了 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中正常工作。

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

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

重新启动CSS动画或更改其参数并不容易。但是，我发现了一些技巧。请参阅以下代码。我将动画参数分离到类中，我添加/删除了该类。加上在CSS-Tricks文章中发现的技巧，它有效：

$(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' />

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

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

相关文章：