如何通过 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 没有变化。
关于javascript - 如何重复动画(CSS 和 Javascript onclick),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42255883/