CSS3动画滑动从左到右，从右到左切换

Question

所以基本上我有一个流程，其中包含用户将经历的多个步骤。每当他们点击前进按钮时，我想将当前步骤向左滑动并从右向左滑动下一步。当向后击中时，我希望当前步骤向右滑动，上一步从左侧滑入。我有它的工作，所以它正确地在第一次点击双向滑动，当我基本上尝试切换它时问题到来（所以点击向前，然后回来）。当我这样做时，该东西将正确滑落，但上一步不会滑回，留下一个空白的内容区域。一旦你先前击中，然后回击，这就是班级的状态：

这是我的动画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')

当步骤发生变化时，我是否应该在某处删除某个类？我是否应该参与更多的课程，以确保屏幕上的内容正在布局？

Answer 1

更简单的方法。国家的3个条款：

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

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

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

和永久的

.slide {
    transition: transform 0.5s;
}