通过 Javascript 更改 Webkit 属性？答案

【问题标题】：Change Webkit properties through Javascript?通过 Javascript 更改 Webkit 属性？
【发布时间】：2014-08-18 08:51:10
【问题描述】：

请帮助我，可能是因为我对 CSS 动画和 Javascript 还很陌生，但我使用的代码应该会更改它的属性，当我运行代码时，它会在代码中执行其他所有操作，除了用于更改所需 div 的 CSS 中的属性。我已经尝试了所有这四个，但它们似乎都不起作用，它们是否过时了？有没有这样做的新方法或什么？它们都不起作用。

document.getElementById('playBar').style.webkitAnimationDuration = 20 + "s";
document.getElementById('playBar').style.animationDuration = 20 + "s";
document.getElementById('playBar').style['-webkit-transition-duration'] = '50s';

value = Math.floor((100 / duration) * currentTime);
document.getElementById('playBar').setAttribute("style","-webkit-filter:grayscale(" + value + "%)")

CSS 代码

#playBar {
width: 1px;
height: 12px;
background: white;
float:left;
-webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
-webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
animation: mymove infinite;
animation-duration: 0s;
}

/* Chrome, Safari, Opera */
-webkit-keyframes mymove {
from {width: 0%;}
to {width: 100%;}
}

@keyframes mymove {
from {width: 0%;}
to {width: 100%;}
}

【问题讨论】：

试试WebkitAnimationDuration，通常-字符后面的所有字母（在JavaScript中被删除）都应该大写。虽然请注意animation-duration 和transition-duration 是两个不同的属性。
@DavidThomas 那么我应该使用第一个吗？只是更正措辞？
这取决于您使用的是 CSS 动画（使用命名为 @keyframes 的动画）还是过渡。
@DavidThomas 我添加了 CSS 代码，这样您就可以准确地看到我在做什么。我基本上是在尝试制作一个加载栏。但我无法控制 Javascript 中的动画。
@DavidThomas 更清楚地说，我希望代码看起来像这样，但这显然行不通。 document.getElementById('playBar').style.-webkit-animation-duration = 20 + "s";

标签： javascript html css animation

【解决方案1】：

而不是

this.style['-webkit-transition-duration'] = '50s'

使用

this.style.WebkitTransitionDuration="50s"

【讨论】：