So basically I have a process with multiple steps that users will go through. Whenever they click a forward button, I want to slide the current step to the left and slide the next step on from right to left. When hitting backwards, I want the current step to slide off to the right and the previous step to slide in from the left. I have it working so it correctly does the slide on the first click both ways, the problem arrives when I basically try to toggle it (so clicking on forward, then back). When I do this, the thing will slide off correctly, but the previous step does not slide back on, leaving a blank content area. This is the state of the classes once you hit forward first, then hit back:

Here's my animation 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;
}

And then I just have:

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

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

And my 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')

Should I be removing a class somewhere when the steps change? Should I have more classes involved to make sure things are laying off screen where they should?

So basically I have a process with multiple steps that users will go through. Whenever they click a forward button, I want to slide the current step to the left and slide the next step on from right to left. When hitting backwards, I want the current step to slide off to the right and the previous step to slide in from the left. I have it working so it correctly does the slide on the first click both ways, the problem arrives when I basically try to toggle it (so clicking on forward, then back). When I do this, the thing will slide off correctly, but the previous step does not slide back on, leaving a blank content area. This is the state of the classes once you hit forward first, then hit back:

Here's my animation 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;
}

And then I just have:

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

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

And my 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')

Should I be removing a class somewhere when the steps change? Should I have more classes involved to make sure things are laying off screen where they should?

• javascript
• jquery
• html
• css

1 Answer 1

A simpler approach. 3 clases for the state:

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

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

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

and a permanent one

.slide {
    transition: transform 0.5s;
}