需要帮助：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动画 - 返回

回答

相关问题