JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div id="div">
My BOX
</div>
<button type="button" id="button">
button
</button>

CSS

div {
  transition: all 2s;
}

JavaScript

const element = document.getElementById('div'); // Replace 'div' with the ID of your target element

const handleTransitionEnd = () => {
  // Transition has ended, do something here
  console.log('Transition has ended');
};

// Add the event listener for transitionend
element.addEventListener('transitionend', handleTransitionEnd);

const button = document.getElementById('button');
let num = 10;

button.addEventListener('click', () => {
  element.style.transition = 'transform 0.5s'; // Add a CSS transition for the transform property
  element.style.transform = `translateX(${num += 100}px)`;

  // Wait for the transition to end
  setTimeout(() => {
    // Check if the transition is still ongoing
    if (window.getComputedStyle(element).getPropertyValue('transition-duration') !== '0s') {
      return; // Transition is still ongoing, exit the function
    }

    // Transition has ended, perform further actions here
    console.log('Transition has ended');
  }, 500); // Adjust the delay (in milliseconds) to match the duration of your transition
});