js动画中的问题

Question

给一些元素绑定事件，事件函数中实现animate动画，让点击元素到一个固定的位置，那么怎样再次点击，让元素回到自己原来的位置呢？

Answer 1

可以定义一个变量flag
flag === true 表示元素在初始位置
flag === false 表示元素在动画执行后的位置
在click事件中根据flag的值执行不同的效果

Answer 2

把animation放在一个class中

  .animate{
            animation:xxx 1s linear forwards;
        }

在点击事件中调用

element.onclick = function(){
    this.classList.toggle("animate");
}

这样就能动态的切换了

Answer 3

我觉得这个需求适合用CSS过渡来做，具体步骤：

1. 给元素绑过渡属性，写上需要变换的属性名（如果只是定位要变的话可以直接用'all'），过渡（即动画）时间和timing-function；

2. 新建一个类，写上元素最终定位位置的相应属性，比如top: xxxpx;left: yyypx;之类的；

3. 在click回调里使用toggleClass()，如果元素上有该属性则去掉，如果没有就加上。