CODEWITHSUNDEEP
javascriptjquerycsscss-animations
TrakJohnson
TrakJohnson

Reputation: 2087

Slide two divs simultaneously with CSS animations

My goal is to make a sliding animations to change between two divs. Here is what I have so far: 

var current = $('#blue');
var other = $('#red');

function slider($elem_in, $elem_out) {
  $elem_in.show();
  // reset the animations
  $elem_in.css('animation', '');
  $elem_out.css('animation', '');
  // remove the previous event handler
  $elem_in.off('animationend');
  // make the elem_out slide out
  $elem_out.css('animation', 'slideLeftOut 1s ease');
  $elem_out.on('animationend', function() {
    $elem_in.css('animation', 'slideLeftIn 1s ease');
    $elem_out.hide();
  });
}

$('#container').on('click', function() {
  slider(other, current);
  // invert the two variables
  other = [current, current = other][0];
})
#container {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid black;
}

#container div {
  height: 100%;
  width: 100%;
}

#red {
  background: red;
}

#blue {
  background: blue;
}


/* slide to the left in */

@keyframes slideLeftIn {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(0%);
  }
}


/* slide to the left out */

@keyframes slideLeftOut {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-150%);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="blue"></div>
  <div id="red"></div>
</div>

There are two problems with this that I'm trying to solve:

  1. When I click and current is $('#red'), it changes to blue before playing the animation. However, when current is $('blue'), the animation works fine.

  2. Is it possible to not have the blank space between the divs when they slide? I have tried moving the $elem_in.css('animation', 'slideLeftIn 1s ease'); outisde of the event handler, however in this case the animation does not play at all.

I've seen the similar questions such as this one, however the answer uses absolute positioning and I'd like to achieve my goal using CSS transitions instead.

Upvotes: 2

Views: 2934

Answers (2)

yezzz
yezzz

Reputation: 3020

As I was curious I created a version with a wrapper and a container inside with 2 elements floating left inside it, and animating the container instead of the seperate elements.

function slider(container) {
  container.css('animation', 'slideLeft 1s ease')
    .on('animationend', function() {
      console.log("swap!");
      container.off('animationend') // remove handler
        .css('animation', '') // reset css
        .children().eq(0).remove().appendTo(container); // swap
    });
}

$('#container').on('click', function() {
  slider($(this));
})

https://jsfiddle.net/ofc4w7dy/

Check my css + comments. Feel free to try animating the elements seperately.

Upvotes: 0

yezzz
yezzz

Reputation: 3020

Problem 1 is related to where to element is placed. After the second element slides there's nothing to the right to slide in to the left. Just take the first animated div and append it at the end.

$elem_out.hide().remove().appendTo("#container");

Also, then you wouldn't need the switching logic. Just reference the 2 elements inside the call to slider(). Something like:

$('#container').on('click', function() {
  slider($(this).children().eq(1),$(this).children().eq(0) )
})

https://jsfiddle.net/0xak4aes/

As for problem 2 I cannot help you at this time.

Upvotes: 2

Related Questions