Javascript:我如何定位过渡时间？

Question

我创建了一个像时间栏一样的 css3 动画。当时间条结束(或动画结束)时，玩家应该能够选择要使用的技能。

我现在遇到的问题是创建的代码可以让我选择专门针对时间并随意更改它，因为我使用的是 CSS 动画的速记代码。

function timeBar (el, color) {
    var elem = document.getElementById(el);
    elem.style.transition = "width 6.0s, linear 0s";
    elem.style.background = color;
    elem.style.width = "0px";
}

如您所见，条形图在 6 秒时填满，但我如何编写代码让我专门针对和更改时间，而让剩余的短手自行处理？我问是因为我想影响其他技能，例如时间停止或时间慢等。

感谢您提供 JQuery，但我正在尝试在没有它的情况下在 atm 上执行此操作，仍在学习 javascript。

Answer 1

elem.style["transition-duration"]

是您可能要修改的属性。请记住，您必须使用前缀才能使其尽可能跨浏览器工作，例如“-webkit-transition-duration”等

如果您愿意，还有一个不错的 jQuery 插件可以做到这一点:http://ricostacruz.com/jquery.transit/

编辑:我最初提出 jQuery 建议是因为问题被(错误地)标记为 jQuery，但当然您可以直接修改声明的属性。