需要幫助：CSS3動畫 - 返回

這是我的代碼，以一個簡單的動畫。我的目的是讓圖像來回移動，如攻擊動畫。我目前有兩個問題;第一：一旦我按「攻擊」（我的按鈕），動畫不會刷新。第二：圖像/動畫只是出來，但不會回來。由於需要幫助：CSS3動畫 - 返回

<body> 


<button id="button">Attack</button> 
<img src="Thor.png" width="152" height="112" id="sprite" /> 

<script> 


button = document.getElementById("button"); 

function changeMargin() { 
var sprite = document.getElementById("sprite"); 
sprite.style.transition = "margin 0.5s ease-in-out 0s"; 
sprite.style.margin="0px 0px 0px 60px"; 
sprite.style.f 
} 


button.onclick = function() { 
    changeMargin(); 

}; 


</script> 

</body>

來源

2014-02-10 Perelan

看起來像你缺少changeMargin（）函數的一些結束？ – glenatron

您可以創建一個復位功能，將帶給你精靈到正常位置，並與的setTimeout（）函數中使用它。點擊Here for Jsfiddle

<body> 


<button id="button">Attack</button> 
<img src="Thor.png" width="152" height="112" id="sprite" /> 

<script> 
    button = document.getElementById("button"); 

    function changeMargin() { 
    var sprite = document.getElementById("sprite"); 
    sprite.style.transition = "margin 0.5s ease-in-out 0s"; 
    sprite.style.margin="0px 0px 0px 60px"; 
    setTimeout(reset,1000); 
} 

function reset(){ 
    var sprite = document.getElementById("sprite"); 
    sprite.style.transition = "margin 0.5s ease-in-out 0s"; 
    sprite.style.margin="0px 0px 0px 0px"; 
} 


button.onclick = function() { 
    changeMargin(); 
}; 

</script> 

</body>

來源

2014-02-10 13:55:08

哇，謝謝！ – Perelan

我的榮幸。確保你接受答案，如果它的工作，或它。 :) –

需要幫助：CSS3動畫 - 返回

回答

相關問題