javascript - 类名的连续更改没有给出预期的输出

Question

大家好，我正在尝试使用 css 动画更改我的灯光颜色。我使用的方法是使用 js 添加/删除动画类。选择一个不同的按钮时它工作正常。但是当两次单击同一个按钮时它不起作用。如何解决这个问题？

function getElement(k){
    var elm = document.getElementById(k);
    return elm;
}

function OnLight(j){ 
    getElement("light" + j).classList.add('buttonAnim');
}

function resetLight(){
    for(let  k=1 ; k<=3 ; k++){
        if ( getElement("light" + k).classList.contains('buttonAnim') ){
            getElement("light" + k).classList.remove('buttonAnim');
        }
    }
}

for(let i=1 ; i<=3 ; i++){    
getElement("button" + i).addEventListener("click",function(){
    resetLight();        
    OnLight(i);
            
                                                     });
}

li{
 list-style:none;
}
 
.light {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #000;
    background-color: #611114;
    box-shadow: inset 0px 0px 5px 1px #000;
 }
 
.buttonAnim {
  -webkit-animation-name: lightChanger;
  -webkit-animation-duration:5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes lightChanger {
    0% {background-color: #611114;}
    40% { background-color: #da0d17;}
    60% { background-color: #da0d17;}
    100% {background-color: #611114;}
}

<li>
  <button id="button1" class="button">button1</button>
  <div id="light1" class="light"></div>
</li>
<li>
  <button id="button2" class="button">button2</button>
  <div id="light2" class="light"></div>
</li>
<li>
  <button id="button3" class="button">button3</button>
  <div id="light3" class="light"></div>
</li>

标签： javascripthtmlcssanimation

Answer 1

由于您的动画是基于类的，因此您需要在单击同一按钮时重新调用该类以再次制作动画，这里我更新了您的 js 代码：

function getElement(k){
    var elm = document.getElementById(k);
    return elm;
}

function OnLight(j){ 
		getElement("light" + j).classList.remove('buttonAnim');
    setTimeout(function(){
    getElement("light" + j).classList.add('buttonAnim');
    },10);
}

function resetLight(){
    for(let  k=1 ; k<=3 ; k++){
        if ( getElement("light" + k).classList.contains('buttonAnim') ){
            getElement("light" + k).classList.remove('buttonAnim');
        }
    }
}

for(let i=1 ; i<=3 ; i++){    
getElement("button" + i).addEventListener("click",function(){
    resetLight();        
    OnLight(i);
            
                                                     });
}

li{
 list-style:none;
}
 
.light {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #000;
    background-color: #611114;
    box-shadow: inset 0px 0px 5px 1px #000;
 }
 
.buttonAnim {
  -webkit-animation-name: lightChanger;
  -webkit-animation-duration:5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes lightChanger {
    0% {background-color: #611114;}
    40% { background-color: #da0d17;}
    60% { background-color: #da0d17;}
    100% {background-color: #611114;}
}

<li>
  <button id="button1" class="button">button1</button>
  <div id="light1" class="light"></div>
</li>
<li>
  <button id="button2" class="button">button2</button>
  <div id="light2" class="light"></div>
</li>
<li>
  <button id="button3" class="button">button3</button>
  <div id="light3" class="light"></div>
</li>

希望这会帮助你。