JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<div class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #121212;
  transition: all 2s ease;
}

JavaScript

const box = document.querySelector('.box')
box.addEventListener('click', e => {
  if (!box.style.transform) {
    box.style.transform = 'translateX(100px)'
    new Promise(resolve => {
      setTimeout(() => {
        box.style.transition = 'none'
        box.style.transform = ''
        setTimeout(() => {
          resolve('Transition complete')
        }, 1)
      }, 2000)
    }).then(() => {
      box.style.transition = ''
    })
  }
})