JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<div class="my-element"></div>

<button class="btn">Slide element</button>

CSS

.my-element {
  width: 100%;
  height: 300px;
  background-color: red;

  transform: translate3d(100%, 0, 0);
}

.slide-in {
  animation: slideIn 1s ease-out forwards;
}

.slide-out {
  animation: slideOut 1s ease-out forwards;
}

@keyframes slideIn {
  0% {
    transform: translate3d(100%, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideOut {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(100%, 0, 0);
  }
}

JavaScript

$(document).on('click', '.btn', function() {
  var isOpen = $('.my-element').hasClass('slide-in');

  $('.my-element')
  	.removeClass(isOpen ? 'slide-in' : 'slide-out')
    .addClass(isOpen ? 'slide-out' : 'slide-in');
});