代码之家 › 专栏 › 技术社区 › ADH - THE TECHIE GUY

类名的连续更改不提供预期的输出

animation css html javascript

ADH - THE TECHIE GUY · 技术社区 · 6 年前

大家好,我正在尝试使用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>

1 回复 | 直到 6 年前

kravisingh 6 年前

因为你的动画是基于类的,所以你需要重新调用类来让动画在同一个按钮上再次点击,这里我已经更新了你的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>

希望这对你有帮助。