Question

使用animation-duration通过JavaScript更改-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

Le code：

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 2

重新启动CSS动画或更改其参数并不容易。但是，我找到了一些技巧。请参阅以下代码。我将动画参数分离到了我添加/删除的类中。再加上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 3

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

metadata_size = "data:audio/mp3;base64,".length data = params[:mp3data][metadata_size, params[:mp3data].length] File.open('public/mp3s/' + filename, 'wb') do |f| f.write(Base64.decode64(data)) end 这项关于IE的工作

在Javascript中更新动画持续时间

3 个答案: