Question

这是我的简单动画代码。我的目的是使图像来回移动，例如攻击动画。我目前有两个问题;第一：一旦我按下“攻击”（我的按钮），动画就不会刷新。第二：图像/动画刚刚出现，但没有回来。感谢

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

Answer 1

您可以创建一个重置功能，它将精灵带到正常位置并与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>

需要帮助：CSS3动画 - 后退和后退

1 个答案: