如何重複使用CSS和Javascript設置的動畫onclick？我是一個非常初學者的代碼作家，知道HTML，CSS和Javascript。我不知道爲什麼以下在線點擊和功能只是一次工作。如果你能幫助我，我將不勝感激。如何重複動畫（CSS和Javascript onclick）

代碼

function discharge() { 
 
    document.getElementById("electron").style.visibility = "visible"; 
 
    document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1 backwards"; // Code for Chrome, Safari, and Opera 
 
    document.getElementById("submit").style.backgroundColor = "lightblue"; 
 
    document.getElementById("submit").style.boxShadow = "0px 3px 3px red"; 
 
    document.getElementById("submit1").style.backgroundColor = "#4CAF50"; 
 
    document.getElementById("submit1").style.boxShadow = "0px 0px 0px red"; 
 
}

#electron { 
 
    position: relative; 
 
    left: -10px; 
 
    visibility: hidden; 
 
} 
 
@-webkit-keyframes mymove { 
 
    0% { 
 
     left: 0px; 
 
     top: 0px; 
 
    } 
 
    25% { 
 
     left: -32px; 
 
     top: 0px; 
 
    } 
 
    50% { 
 
     left: -32px; 
 
     top: -20px; 
 
    } 
 
    75% { 
 
     left: 158px; 
 
     top: -20px; 
 
    } 
 
    100% { 
 
     left: 158px; 
 
     top: 5px; 
 
    } 
 
}

<div> 
 
    <button id="submit" onclick="discharge()">Discharge</button> 
 
    <button id="submit1">charge</button> 
 
</div> 
 

 
<div id="electron"> 
 
    <br /><i class="fa fa-minus-circle"></i> 
 
    <br /><i class="fa fa-minus- circle"></i> 
 
    <br /> 
 
</div>

來源

2017-02-15 Peter

'charge（）'在哪裏？ – Skylark

請使用答案爲您解決問題

HTML

<div> 
    <button id="submit" onclick="discharge()">Discharge</button> 
    <button id="submit1" onclick="charge()">charge</button> 
</div> 

<div id="electron"> 
    <br/><i class="fa fa-minus-circle"></i> 
    <br/><i class="fa fa-minus- circle"></i> 
    <br/> 
</div>

的JavaScript

discharge = function() { 
    document.getElementById("electron").style.visibility = "visible"; 
    document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1 backwards"; // Code for Chrome, Safari, and Opera 
    document.getElementById("submit").style.backgroundColor = "lightblue"; 
    document.getElementById("submit").style.boxShadow = "0px 3px 3px red"; 
    document.getElementById("submit1").style.backgroundColor = "#4CAF50"; 
    document.getElementById("submit1").style.boxShadow = "0px 0px 0px red"; 
} 

charge = function(){ 
document.getElementById("electron").removeAttribute('style'); 
document.getElementById("submit").removeAttribute('style'); 
document.getElementById("submit1").removeAttribute('style'); 
}

在CSS沒有變化。

來源

2017-02-16 10:58:07

謝謝它的工作原理:) – Peter

給出具有定義功能的問題javascript代碼。請使用discharge = function(){ 有喜歡electron和li 一些缺少的元素同樣，我不能找到一個名爲charge()

，所以我有評論缺少的元素與下面提供的任何功能。

discharge = function() { 
// document.getElementById("electron").style.visibility = "visible"; 
// document.getElementById("li").style.visibility = "visible"; 
// document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1 backwards"; // Code for Chrome, Safari, and Opera 
document.getElementById("submit").style.backgroundColor = "lightblue"; 
document.getElementById("submit").style.boxShadow = "0px 3px 3px red"; 
document.getElementById("submit1").style.backgroundColor = "#4CAF50"; 
document.getElementById("submit1").style.boxShadow = "0px 0px 0px red";}

來源

2017-02-15 17:31:00

謝謝。你是對的。這是正確的版本： – Peter

我在問題部分修復了這個問題。謝謝你的幫助。我期待着您的迴音。 – Peter

是的，這也很好。 –

如何重複動畫（CSS和Javascript onclick）

代碼

回答

相關問題