JSFiddle - React, Tailwind, and code Playground

by voxman90

HTML

<div class='container'>
     <div class='item'></div>
  </div>

CSS

.container {
  width: 300px;
  height: 100px;
  margin: 50px;
  background: gray;
}

.item {
  display: none;
  width: 100px;
  height: 100px;
  background: green;
  transition: transform 1000ms ease;
}

.right {
  display: block;
  transform: translateX(100%);
}

.center {
  transform: translateX(0);
}

JavaScript

$('.container').on('click', (event) => {
	$('.container .item').addClass('right');
	setTimeout(() => {
    $('.container .item').addClass('center');
  }, 0);
});