3

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

我设置了一个输入字段来获取动画速度值，该值连接到以下事件侦听器（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 中正常工作。

4

3 回答 3

6

使用 直接设置样式元素[]以访问供应商前缀或本机 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);
于 2015-01-30T19:13:50.637 回答
2

重新启动 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' />

于 2015-01-30T19:13:19.707 回答
1

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

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

于 2016-11-29T03:22:18.157 回答