所以,我正在做这个汽车展示画廊,我想使用CSS动画。
现在只使用Firefox,当我手动设置“img”的类以向左设置动画时动画确实有效: HTML:
<img src="test3.jpg" id="Position2" class="Pos2ForLeft">
CSS:
@keyframes Pos2Pos1 {
0% {left: 450; top: 200; width: 400; height:300;}
100% {left: 200; top: 250; width: 200; height:150;}
}
.Pos2ForLeft {
position:absolute; left: 450; top: 200; width: 400; height:300;
animation-name: Pos2Pos1;animation-play-state:running;
animation-duration:1s; animation-fill-mode: forwards;
}
因此,当我手动编码时,动画会运行然后停止,就像我想要的那样。但是,当我从一个标准的CSS类开始并希望切换到带有动画的类时,没有任何反应:
document.getElementById("Position"+i).class = "Pos"+positionsBefore[i]+"ForLeft";
alert(document.getElementById("Position"+i).class)
请忽略循环和变量。我收到警告,该类已更改为我想要的类,但没有任何反应。我需要触发什么,发生了什么?
答案 0 :(得分:0)
JavaScript中的元素不会响应&#39;类&#39;属性。正确的属性是className。所以代码看起来像这样:
document.getElementById("Position"+i).className = "Pos"+positionsBefore[i]+"ForLeft";
答案 1 :(得分:0)
如果你想在属性改变时应用css,你应该使用转换,link你可以看到它在演示中将horizTranslate类类添加到框中
答案 2 :(得分:0)
document.getElementById("Position"+i).className = "Pos"+positionsBefore[i]+"ForLeft";
非常感谢网络上的精彩人士!!其他一些程序员给我的解决方案至少可以说是吓人......