如何重复onclick
用CSS和Javascript设置的动画?
我是一个非常初级的代码编写者,并且了解HTML,CSS和Javascript。我不知道为什么以下在线单击和功能只能运行一次。如果您能帮助我,我将不胜感激。
码
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>
最佳答案
请使用此答案解决您的问题
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没有变化。