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;
}