Javascript CSS3动画幻灯片从左到右和从右到左切换

因此，基本上我有一个用户将经历的多个步骤的过程。每当他们单击“前进”按钮时，我都想将当前步骤向左滑动，并将下一步从右向左滑动。当向后击球时，我希望当前的一步滑到右边，上一步滑到左边。我让它正常工作，这样它在第一次单击时就可以正确地双向滑动，当我基本上尝试切换它时，问题就出现了（所以单击“前进”，然后单击“后退”）。当我这样做时，东西会正确滑出，但上一步不会滑回，留下空白内容区域。这是类的状态，当您先单击“前进”，然后单击“后退”：

以下是我的动画CSS：

@keyframes slide-in-from-left {
  0% { tranform: translate(-100%); }
  100% { transform: translateX(0%); }
}

@keyframes slide-out-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

@keyframes slide-in-from-right {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0%); }
}

@keyframes slide-out-right {
  0% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

// Animation Classes
// ------------------------------

.slide-in-from-left {
  animation: slide-in-from-left 0.5s forwards;
}

.slide-out-left {
  animation: slide-out-left 0.5s forwards;
}

.slide-in-from-right {
  animation: slide-in-from-right 0.5s forwards;
}

.slide-out-right {
  animation: slide-out-right 0.5s forwards;
}

然后我就有了：

  [class^="step-"] {
    position: absolute;
  }

  .step-4 {
    transform: translateX(-100%);
  }

还有我的jQuery/coffeescript：

  goForwardAStep = () ->
    step = $(this).data('step')

    $('.signup .step-' + step).addClass('slide-out-left')
    $('.signup .step-' + (step + 1)).addClass('slide-in-from-right')

  goBackAStep = () ->
    step = $(this).data('step')

    $('.signup .step-' + step).addClass('slide-out-right')
    $('.signup .step-' + (step - 1)).addClass('slide-in-from-left')

---

当步骤改变时，我是否应该删除某个类？我是否应该加入更多的课程，以确保屏幕上的内容在它们应该的位置进行布局？

一种更简单的方法。国家的3个类别：

.current {
    transform: {translateX(0%);}
}

.moved-left {
    transform: {translateX(-100%);}
}

.moved-right {
    transform: {translateX(100%);}
}

而且是永久的

.slide {
    transition: transform 0.5s;
}