点击触发transform效果，在动画未完成之前无法再次触发

    var index = 1;
    var $frame = $(".episode-frame");
    var lefts = ""
    $(".episode-prev").click(function(){
        if (!$frame.is(":animated")){
            $frame.addClass("animate")
            index--;
            lefts = index * 1227;
            if (index >= 1){
                $frame.css("transform", "translateX(-" +  lefts + "px)")
            }
            if (index == 0){
                $frame.css("transform", "translateX(0px)")
                index = 5
                setTimeout(function() {
                    $frame.removeClass("animate")
                    $frame.css("transform", "translateX(-6135px)")
                }, 500);
            }
        }
    })

我原来想用：animated来判断是否在动画中，发现没有用，有其他判断的方法吗，不然只要点的过快，位移还没完成就直接跳到下个页面去了

提供一点自己的方法，希望有所帮助。

不推荐使用JS改变过多CSS样式，我们可以考虑将其写在一个CSS中，通过添加类名来实现。**我使用的这种方法并不会出现楼主说的需要判断动画是否完成这个问题~~~**
1. 比如楼主的这个移动效果，我们实现的代码可以这样：

HTML:
  <div class="testTransition" onclick="addTranstion()">
    这是transition,点击添加动画
  </div>
JS:
function addTranstion () {
  let tra =  document.getElementsByClassName('testTransition')[0]
  console.log('======', tra)
  tra.classList.add('addTranstion')
}
CSS:
  .testTransition {
    width: 100px;
    height: 300px;
    position: relative;
    left: 50px;
    background-color: aqua;
    transition-property: left,background-color;
    transition: 2s ease-in-out;
  }
  .addTranstion {
    left: 200px;
    background-color: brown;
  }

通过JS来添加class类名就能解决元素的移动动画了。

1. 提供animation动画方法：

CSS：
  .testAnimation {
    width: 100px;
    height: 300px;
    background-color: red;
  }
  .addAnimation {
    animation: test 3s ease-in-out 1s infinite alternate running
  }
  @keyframes test {
    20% {
      width: 150px;
      height: 200px;
      background-color: slateblue;
    }
    60% {
      width: 300px;
      height: 100px;
      background-color: bisque;
    }
    100% {
      width: 200px;
      height: 200px;
      background-color: coral;
    }
  }

其它HTML和JS，和上面一样。
end希望对你有帮助