我来帮你分析下这个问题的根源，以及怎么快速解决它～

问题原因拆解 #

你遇到的“必须点击两次按钮才触发动画”的问题，核心是对Animate.js的reverse()方法的理解有偏差：

1. 初始状态：咱们创建的动画实例animeSquare设置了autoplay: false，一开始处于静止状态，进度（progress）为0，播放方向是正向，按钮也没有is-active类。
2. 第一次点击：因为按钮没is-active类，代码执行animeSquare.play()，动画正常播放到结束（方块移到目标位置），同时按钮加上is-active类。
3. 第二次点击：这时候按钮有is-active类，代码执行animeSquare.reverse()——但这里要注意：reverse()只是切换动画的播放方向（从正向改成反向），并不会自动启动播放！这时候动画虽然方向变了，但还停在结束位置（进度100%），所以你看不到任何动画效果。
4. 第三次点击：按钮已经移除is-active类，代码执行animeSquare.play()，这时候动画才会按照之前切换好的反向播放，方块移回初始位置，按钮重新加上is-active类。

说白了：第二次点击只改了方向，没启动播放，所以得第三次点击才会动起来。

修复后的代码 #

我们只需要在切换方向后立即调用play()启动动画，同时处理反向播放完毕后的正向切换场景：

/** animation */
let animeSquare = anime({
  targets: '.square',
  translateX: '100px',
  duration: 500,
  autoplay: false,
});
/** button */
$('.btn').click(function() {
  const $btn = $(this);
  if ($btn.hasClass('is-active')) {
    // 切换反向并立即启动播放
    animeSquare.reverse();
    animeSquare.play();
    $btn.removeClass('is-active');
  } else {
    // 如果动画已经反向播放完毕，先切回正向再播放
    if (animeSquare.progress === 0 && animeSquare.reversed) {
      animeSquare.reverse();
    }
    animeSquare.play();
    $btn.addClass('is-active');
  }
});

补充小知识 #

• reverse()方法只会切换播放方向，不会改变当前进度，也不会自动触发播放。
• 当动画处于**完成状态（progress=100%）**时，调用reverse()+play()，会从结束位置往初始位置播放反向动画。
• 当动画处于初始状态（progress=0）且方向为反向时，需要先reverse()切回正向，再play()才能重新触发正向动画。

内容的提问来源于stack exchange，提问作者aitor