我有一个银行应用程序,有一个超级酷的手下来,并将一枚硬币放入存钱罐。问题是,只有一只手掉落硬币然后停止工作。
这是我的代码:
* {
margin:0px;
padding:0px;
}
body {
background-image:url('../images/bg.png');
}
@keyframes moveDown {
0% {}
100% {margin-top:-220px;}
}
@keyframes fadeIn {
0% {opacity:0;}
90%{opacity:1}
100%{opacity:0;}
}
#hand {
height:300px;
width:300px;
position:absolute;
left:50%;
margin-left:-120px;
margin-top:-350px;
background-image:url("../images/hand.png");
opacity:0;
}
#pigBox {
margin-left:auto;
margin-right:auto;
height:600px;
width:500px;
margin-top:250px;
position:relative;
img {
margin:0px 50px;
}
}
input[type=text] {
float:left;
display:block;
font-size:2em;
width:500px;
border-radius:10px;
border:solid 2px pink;
margin-top:10px;
font-family: 'Gochi Hand', cursive;
text-align:center;
padding:2px;
}
#deposit {
float:left;
display:block;
font-family: 'Gochi Hand', cursive;
font-size:2em;
clear:left;
width:200px;
margin:10px 25px;
border-radius:10px;
background-color:pink;
border:solid 2px pink;
padding:2px;
cursor:pointer;
&:hover {
background-color:white;
}
}
#withdraw {
float:left;
display:block;
font-family: 'Gochi Hand', cursive;
font-size:2em;
width:200px;
margin:10px 25px;
border-radius:10px;
background-color:pink;
border:solid 2px pink;
padding:2px;
cursor:pointer;
&:hover {
background-color:white;
}
}
label {
text-align:center;
display:block;
font-family: 'Gochi Hand', cursive;
font-size:2.5em;
border-radius:10px;
width:300px;
margin-left:100px;
margin-right:100px;
margin-top:5px;
margin-bottom:-15px;
}
document.getElementById('balance').value = "1000"
var balance = document.getElementById('balance').value;
var deposit = document.getElementById('deposit');
var withdraw = document.getElementById('withdraw');
var hand = document.getElementById('hand');
deposit.addEventListener('click', depositCash);
withdraw.addEventListener('click', withdrawCash);
function depositCash() {
var depositAmt = prompt('How much would you like to deposit?');
if(depositAmt != Number(depositAmt)) {
return alert('Please enter a valid integer.');
}
else if (Number(depositAmt) < 0) {
return alert('Please enter a positive integer.');
}
hand.style.animation = 'moveDown 1.5s ease-in-out, fadeIn 1.5s ease-in-out';
balance = Number(balance) + Number(depositAmt);
document.getElementById('balance').value = balance;
}
function withdrawCash() {
var withdrawAmt = prompt('How much you you like to withdraw?');
if(withdrawAmt != Number(withdrawAmt)) {
return alert('Please enter a valid integer.');
}
else if (Number(withdrawAmt) < 0) {
return alert('Please enter a positive integer.');
}
else if(withdrawAmt > balance) {
return alert("Your balance isn't large enough to withdraw that amount!")
}
balance = Number(balance) - Number(withdrawAmt);
document.getElementById('balance').value = balance;
}
<section id="pigBox">
<div id="hand"></div><!-- end of hand-->
<img src="images/pig.png" />
<label>Balance: </label><input type="text" id="balance" />
<button id="deposit"> Deposit </button>
<button id="withdraw"> Withdraw </button>
</section><!-- end of pigBox-->
<a href="http://imgur.com/FxwmGFi"><img src="http://i.imgur.com/FxwmGFi.png" title="source: imgur.com" /></a>
当你把钱存入存钱罐时,请注意hand.style动画。
有什么想法吗?
谢谢!
答案 0 :(得分:4)
这是因为CSS animations don't automatically restart。特别是因为你没有定义时间循环,所以它只执行一次。
一种方法是使用.addClass('x')。removeClass('x')重新触发在类X上定义的动画。
.addClass()当然是jQuery。你可以在vanilla JS中使用相同的方法,例如,hand.className + ='my-animation';并按照以下方法重置在方法的顶部。
//ref: https://css-tricks.com/restart-css-animation/
document.getElementById('balance').value = "1000"
var balance = document.getElementById('balance').value;
var deposit = document.getElementById('deposit');
var withdraw = document.getElementById('withdraw');
var hand = document.getElementById('hand');
deposit.addEventListener('click', depositCash);
withdraw.addEventListener('click', withdrawCash);
function depositCash() {
hand.className = 'randoImage';
var depositAmt = prompt('How much would you like to deposit?');
if(depositAmt != Number(depositAmt)) {
return alert('Please enter a valid integer.');
}
else if (Number(depositAmt) < 0) {
return alert('Please enter a positive integer.');
}
hand.className += ' my-animation';
balance = Number(balance) + Number(depositAmt);
document.getElementById('balance').value = balance;
}
function withdrawCash() {
var withdrawAmt = prompt('How much you you like to withdraw?');
if(withdrawAmt != Number(withdrawAmt)) {
return alert('Please enter a valid integer.');
}
else if (Number(withdrawAmt) < 0) {
return alert('Please enter a positive integer.');
}
else if(withdrawAmt > balance) {
return alert("Your balance isn't large enough to withdraw that amount!")
}
balance = Number(balance) - Number(withdrawAmt);
document.getElementById('balance').value = balance;
}
.randoImage {
width: 25px;
height: 25px;
background-image: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7);
}
* {
margin:0px;
padding:0px;
}
@keyframes moveDown {
0% {}
100% {margin-top:-220px;}
}
@keyframes fadeIn {
0% {opacity:0;}
90%{opacity:1}
100%{opacity:0;}
}
#hand {
height:300px;
width:300px;
position:absolute;
left:50%;
margin-left:-120px;
margin-top:-350px;
/*background-image:url("../images/hand.png");*/
opacity:0;
}
#pigBox {
margin-left:auto;
margin-right:auto;
height:600px;
width:500px;
margin-top:250px;
position:relative;
img {
margin:0px 50px;
}
}
input[type=text] {
float:left;
display:block;
font-size:2em;
width:500px;
border-radius:10px;
border:solid 2px pink;
margin-top:10px;
font-family: 'Gochi Hand', cursive;
text-align:center;
padding:2px;
}
#deposit {
float:left;
display:block;
font-family: 'Gochi Hand', cursive;
font-size:2em;
clear:left;
width:200px;
margin:10px 25px;
border-radius:10px;
background-color:pink;
border:solid 2px pink;
padding:2px;
cursor:pointer;
&:hover {
background-color:white;
}
}
#withdraw {
float:left;
display:block;
font-family: 'Gochi Hand', cursive;
font-size:2em;
width:200px;
margin:10px 25px;
border-radius:10px;
background-color:pink;
border:solid 2px pink;
padding:2px;
cursor:pointer;
&:hover {
background-color:white;
}
}
label {
text-align:center;
display:block;
font-family: 'Gochi Hand', cursive;
font-size:2.5em;
border-radius:10px;
width:300px;
margin-left:100px;
margin-right:100px;
margin-top:5px;
margin-bottom:-15px;
}
.my-animation {
animation: moveDown 1.5s ease-in-out, fadeIn 1.5s ease-in-out;
}
<section id="pigBox">
<div class="randoImage" id="hand"></div><!-- end of hand-->
<img class="randoImage" />
<!--<img src="images/pig.png" />-->
<label>Balance: </label><input type="text" id="balance" />
<button id="deposit"> Deposit </button>
<button id="withdraw"> Withdraw </button>
</section><!-- end of pigBox-->
答案 1 :(得分:1)
您应该在动画后删除Hand的样式(在脚本中添加3行):
...
var myHand = false;
deposit.addEventListener(&#39;点击&#39;,depositCash);
withdraw.addEventListener(&#39;点击&#39;,withdrawCash);
function depositCash(){
if(myHand)clearTimeout(myHand);
...
hand.style.animation =&#39; moveDown 1.5s easy-in-out,fadeIn 1.5s ease-in-out&#39;;
balance = Number(balance)+ Number(depositAmt);
document.getElementById(&#39;余额&#39;)。value = balance;
myHand = setTimeout(function(){hand.style.animation =&#39;&#39;;},2000);
}
答案 2 :(得分:0)
遇到同样的问题。
对于那些使用jQuery的人,这是我的解决方案。
我意识到,如果我们将 .addClass()。removeClass()串在一起,jQuery会解释和否定这两个命令,因此不会发生任何变化。因此,我建议使用超时功能的解决方法:
让 animationTimeout
clearTimeout (animationTimeout)
$('#animatedElement')。 addClass ('animation')
animationTimeout = setTimeout (()=> {$('#animatedElement')。 removeClass ('animation')},animationDuration)
答案 3 :(得分:0)
使用动画svgs的快速简单的解决方案是使用随机查询(例如)加载图片;
假定具有现有功能loadImage的javascript环境
loadImage('image.svg?u ='+ new Date()。getMilliseconds());
您欺骗浏览器,以为它的文件不一样,动画就开始了。