JavaScript CSS動畫只能工作一次

我有一個銀行應用程序，有一個超級酷的手下來，並將一枚硬幣放入存錢罐。問題是，手只會投下一枚硬幣然後停止工作。JavaScript CSS動畫只能工作一次

這裏是我的代碼：

* { 
    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動畫。

任何想法傢伙？

謝謝！

來源

2017-04-14 Brixsta

self-contained example plz？我想看到supercool的手:-) – Christoph

我如何可以在這裏託管我的圖片和CSS;） – Brixsta

@Brixsta您可以添加圖像到您的問題，它應該爲他們分配一個imgur鏈接。對於CSS，只需發佈，就像使用JavaScript和HTML一樣。 – freginold

這是因爲CSS animations don't automatically restart。特別是因爲你沒有定義一個時間循環，所以它只執行一次。

的一種方法是讓你使用.addClass（ 'X'）。removeClass（ 'X'），以重新觸發上類X.

.addClass（）中所定義的動畫是當然的jQuery。你可以使用例如hand.className + ='my-animation'在vanilla JS中做同樣的事情。並按照下面的方法重新設置該方法的頂部。

//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-->

來源

2017-04-14 13:43:35

您的解決方案只執行一次。使用IE11。 – freginold

固定我認爲，請檢查。現在不需要jQuery！ –

一切都好！好的解決方案 – freginold

動畫後，您應該刪除樣式手（增加3號線到你的腳本）：

...

VAR myHand = FALSE;

deposit.addEventListener（ '點擊'，depositCash）;

withdraw.addEventListener（ '點擊'，withdrawCash）;

功能depositCash（）{

如果（myHand）clearTimeout（myHand）;

...

hand.style.animation = '下移1.5s的易於進出，淡入1.5s的易於進出';

餘額=數（餘額）+號（depositAmt）;

的document.getElementById（ '平衡'）值=平衡。

myHand = setTimeout的（函數（）{hand.style.animation = '';}，2000）;

}

來源

2017-04-14 14:05:22

JavaScript CSS動畫只能工作一次

回答

相關問題