JS 不会触发 css animation

Question

当第一次单击按钮时，淡入淡出动画（不透明度变化）起作用。 但是对于接下来的所有点击，它不再起作用了。 当我进行调试时，它显示它每次都在工作。 但实际上为什么不呢？

 let colorArray = ['red','yellow','green','teal'] let index = 0 function imageChanger(){ document.querySelector('.container').id = '' if(index == colorArray.length-1) index = 0 else index++ document.querySelector('.container').style.backgroundColor = colorArray[index] document.querySelector('.container').id = 'fade' }

 .container{ height: 300px; max-width: 400px; background-color: teal; } #fade{ animation: fade 5s; } @keyframes fade{ from{opacity:.4 } to{opacity: 1} }

 <button onclick="imageChanger()">Change</button> <div class="container" id=""></div>

Answer 1

一旦你添加了fade id，它就会运行 animation 并且不再重复。

您应该每次删除它并再次添加。 使用setTimeout给 css 时间来找到它被移除。

另外我建议使用 class 代替 id，并使用过渡代替关键帧

 let colorArray = ['red','yellow','green','teal'] let index = 0 function imageChanger(){ document.querySelector('.container').id = '' if(index == colorArray.length-1) index = 0 else index++ document.querySelector('.container').style.backgroundColor = colorArray[index] document.querySelector('.container').classList.remove('fade') setTimeout( function(){ document.querySelector('.container').classList.add('fade') }, 50); }

 .container{ height: 300px; max-width: 400px; background-color: teal; opacity: .2; transition: opacity 0s linear; }.container.fade{ transition: opacity 3s linear; opacity: 1; }

 <button onclick="imageChanger()">Change</button> <div class="container fade"></div>

Answer 2

我基本同意上面的回答。 只是想指出，如果您希望第一个蓝绿色块显示为蓝绿色而不是不透明，您需要在初始 html 中包含淡入淡出 class。

此外，如果您希望第一个过渡是蓝绿色到红色，您应该从 -1 的索引 position 开始，而不是 0。

<button onclick="imageChanger()">Change</button>
<div class="container fade" id=""></div>

let index = -1;