CODEWITHSUNDEEP
javascriptjqueryhtmlcss
sdvnksv
sdvnksv

Reputation: 9668

Revert the animation backwards CSS

I have an animation going one direction. I want to revert it backwards (i.g. animate to the original position):

$('#right').click(function() {
  $('.container').removeClass('.move-left').addClass('move-right');
});
$('#left').click(function() {
  $('.container').removeClass('.move-right').addClass('move-left');
});
.container {
  margin-top: 20px;
  width: 10px; height: 10px;
  background-color: green;
}
.move-right {
  animation: move-right 10s linear;
}
.move-left {
  animation: move-left 10s linear;
}
@keyframes move-right {
  to {
    transform: translateX(500px);
  }
}
@keyframes move-left {
  to {
    transform: translateX(0);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="left">Left</button>
<button id="right">Right right first</button>
<div class="container"></div>

http://codepen.io/Deka87/pen/GWVbjv

This one doesn't work (because I think I need to save the current translate position, which gives me unexpected results when I then resize the page). Is there any bulletproof solution? (animation-direction doesn't seem to be the case).

Upvotes: 1

Views: 57

Answers (1)

DaniP
DaniP

Reputation: 38252

One option is to use the same value as starter for the left animation, also use forwards to keep the final state of the animation:

$('#right').click(function() {
  $('.container').removeClass('move-left').addClass('move-right');
});
$('#left').click(function() {
  $('.container').removeClass('move-right').addClass('move-left');
});
.container {
  margin-top: 20px;
  width: 10px; height: 10px;
  background-color: green;
}
.move-right {
  animation: move-right 2s linear forwards;
}
.move-left {
  animation: move-left 2s linear forwards;
}
@keyframes move-right {
  to {
    transform: translateX(100px);
  }
}
@keyframes move-left {
  from {
    transform: translateX(100px);
  },
  to {
    transform: translateX(0);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="left">Left</button>
<button id="right">Right right first</button>
<div class="container"></div>

Bonus

If your goal is to just move the element that way you may prefer to use transition check the snippet below, that will allow you to use the buttons when the transition is happen on your first code if you press the buttons will jump to make the animation from the last point.

$('button').click(function() {
  if($(this).attr('id')=="right") {
    $('.container').addClass('move')
  } else {
    $('.container').removeClass('move')
  }
});
.container {
  margin-top: 20px;
  width: 10px; height: 10px;
  background-color: green;
  transition:transform 2s linear;
}
.move {
  transform: translateX(100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="left">Left</button>
<button id="right">Right right first</button>
<div class="container"></div>

Jquery animate()

$('button').click(function() {
  if($(this).attr('id')=="right") {
    $('.container').stop().animate({'left':'200px'},2000)
  } else if($(this).attr('id')=="left") {
    $('.container').stop().animate({'left':'0'},2000)
  } else {
    $('.container').stop()
  }
});
.container {
  position:relative;
  margin-top: 20px;
  width: 10px; height: 10px;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="left">Left</button>
<button id="pause">Pause</button>
<button id="right">Right right first</button>
<div class="container"></div>

Upvotes: 1

Related Questions