<分区>
javascript - css 中的关键帧无法使用 javascript 正常工作
我想使用 javascript 动态添加动画，以便在用户点击后播放动画。例如想象 connect 4 game ，目的是播放从棋盘顶部到应放置珠子的位置的动画。问题是样式已成功添加到文档中，但无法正常工作!
这是我实现的:
function changeColor(i, j){
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = currentTurn;
var style = document.querySelector('style');
var keyframe = `\
@keyframes animation-${i}-${j} {\
0% {\
top: 0%;\
}\
100% {\
top: 20%;\
}\
}\
\
`
div.style.animationName = `animation-${i}-${j}`;
div.style.animationDuration = '2s';
style.innerHTML += keyframe;
}
currentTurn has the value of "red" | "blue".
不知道为什么动画不播放! dom如下图:
最佳答案
请看下面。
function changeColor(i, j) {
var div = document.querySelector(`.cell-${i}-${j}`);
div.style.backgroundColor = "blue";
var style = document.getElementsByTagName('style')[2];
var keyframe = `\
@keyframes animation-${i}-${j} {\
0% {\
top: 0%;\
}\
100% {\
top: 20%;\
}\
}\
\
`;
style.innerHTML += keyframe;
div.style.animationDuration = '2s';
div.style.animationName = `animation-${i}-${j}`;
}
changeColor(1, 1);<style>
.cell-1-1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
<div class="cell-1-1"></div>关于javascript - css 中的关键帧无法使用 javascript 正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53281504/