给一些元素绑定事件，事件函数中实现animate动画，让点击元素到一个固定的位置，那么怎样再次点击，让元素回到自己原来的位置呢？
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...
可以定义一个变量flagflag === true 表示元素在初始位置flag === false 表示元素在动画执行后的位置在click事件中根据flag的值执行不同的效果
把animation放在一个class中
animation
class
.animate{ animation:xxx 1s linear forwards; }
在点击事件中调用
element.onclick = function(){ this.classList.toggle("animate"); }
这样就能动态的切换了
我觉得这个需求适合用CSS过渡来做，具体步骤：
给元素绑过渡属性，写上需要变换的属性名（如果只是定位要变的话可以直接用'all'），过渡（即动画）时间和timing-function；
'all'
新建一个类，写上元素最终定位位置的相应属性，比如top: xxxpx;left: yyypx;之类的；
top: xxxpx;left: yyypx;
在click回调里使用toggleClass()，如果元素上有该属性则去掉，如果没有就加上。
toggleClass()
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
可以定义一个变量flag
flag === true 表示元素在初始位置
flag === false 表示元素在动画执行后的位置
在click事件中根据flag的值执行不同的效果
把
animation放在一个class中在点击事件中调用
这样就能动态的切换了
我觉得这个需求适合用CSS过渡来做，具体步骤：
给元素绑过渡属性，写上需要变换的属性名（如果只是定位要变的话可以直接用
'all'），过渡（即动画）时间和timing-function；新建一个类，写上元素最终定位位置的相应属性，比如
top: xxxpx;left: yyypx;之类的；在click回调里使用
toggleClass()，如果元素上有该属性则去掉，如果没有就加上。