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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2076 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

http://jsrun.net/S8XKp

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

会东

点击

能动

小人

13 条回复 • 2019-03-20 15:26:57 +08:00

lllllliu

2019-03-18 17:26:48 +08:00

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

en20

2019-03-18 17:31:22 +08:00

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

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

davin

2019-03-18 17:41:00 +08:00

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

keventseng

2019-03-18 17:53:58 +08:00

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

azh7138m

2019-03-18 17:57:55 +08:00

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

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

pinews

2019-03-18 18:09:27 +08:00

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

wunonglin

2019-03-18 18:14:00 +08:00

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

2019-03-18 18:15:56 +08:00

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

wunonglin

2019-03-18 18:16:54 +08:00

https://jsfiddle.net/t3x1uL7z/

pinews

2019-03-18 19:23:47 +08:00

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