Question

请帮助我，可能因为我对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%;}
}

Answer 1

而不是

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

使用

this.style.WebkitTransitionDuration="50s"

通过Javascript更改Webkit属性？

1 个答案: