我设计一个会东的小人，请教如何让他点一次动一次？

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2791 days ago, the information mentioned may be changed or developed.

如何让每次点击都可以重新开始，现在只有第一次点击能动

http://jsrun.net/S8XKp

编辑模式 http://jsrun.net/S8XKp/edit

会东

点击

能动

小人

13 replies • 2019-03-20 15:26:57 +08:00

lllllliu

Mar 18, 2019

没太懂，但是看了下。
按照你的代码来的话，你可以每次先把那个 move 的样式去掉，然后再添加。。

en20

Mar 18, 2019

这样？？
```
let div = document.querySelector("div")

div.onclick = function() {
div.className = "";
setTimeout(() => {
div.className = "move";
},5000)
```

davin

Mar 18, 2019

可以把 `document.querySelector("div").className = "move";` 换成 `this.classList.toggle('move');` 这句，让小人来回动

keventseng

Mar 18, 2019

将 gif 导出多张帧图片，然后用点击事件轮换图片。

azh7138m

Mar 18, 2019

https://css-tricks.com/restart-css-animation/

没啥好的建议，重新生成一个新的元素吧，或者不用 class，直接操作 style （

pinews

Mar 18, 2019

@davin 单数点击可以，双数是错的。
@en20 可以了，谢谢，不过我把 5000 改成了 0，这样才好。

shakaraka

Mar 18, 2019

```html
<div>
<img id='img' src=http://image.99114.com/upfile/pro/20071224/0935550505.gif>
</div>
```

```css
img {
cursor: pointer;
transition: all .4s ease;
background-color: aquamarine;
}
img.move{
transform: translateX(100%);
}

div {
width: 100%;
}

```

```js

document.querySelector("#img").onclick = function() {
document.querySelector("#img").classList.contains('move') ?
document.querySelector("#img").classList.remove('move') :
document.querySelector("#img").classList.add('move')
}
```

pinews

Mar 18, 2019

@azh7138m thank you 汇总的很好，javascript 克隆那个算比较简单的，谢谢

shakaraka

Mar 18, 2019

https://jsfiddle.net/t3x1uL7z/

pinews

Mar 18, 2019

@wunonglin 你这个和 @davin 是一样的