JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div class="container">
  <div class="item" id="item1">Item 1</div>
  <div class="item" id="item2">Item 2</div>
  <div class="item" id="item3">Item 3</div>
</div>

CSS

.container {
  display: flex;
  border: 1px solid #ddd;
}

.item {
  width: 100px;
  height: 50px;
  border: 1px solid #ccc;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

JavaScript

// Function to swap elements with animation
function swapElementsWithAnimation(element1, element2) {
  const container = element1.parentNode;
  const containerRect = container.getBoundingClientRect();
  const element1Rect = element1.getBoundingClientRect();
  const element2Rect = element2.getBoundingClientRect();

  const element1OffsetX = element1Rect.left - containerRect.left;
  const element1OffsetY = element1Rect.top - containerRect.top;

  const element2OffsetX = element2Rect.left - containerRect.left;
  const element2OffsetY = element2Rect.top - containerRect.top;

  // Apply transform to animate the swap
  element1.style.transition = 'none'; // Disable transition temporarily
  element2.style.transition = 'none';
  element1.style.transform = `translate(${element2OffsetX - element1OffsetX}px, ${element2OffsetY - element1OffsetY}px)`;
  element2.style.transform = `translate(${element1OffsetX - element2OffsetX}px, ${element1OffsetY - element2OffsetY}px)`;

  // Trigger layout reflow (required for smooth animation)
  container.getBoundingClientRect();

  // After a short delay, reset the transforms for a smooth animation
  element1.style.transition = 'transform 0.3s ease';
  element2.style.transition = 'transform 0.3s ease';
  element1.style.transform = '';
  element2.style.transform = '';
}

// Event listeners to handle swapping with animation
const item1 = document.getElementById('item1');
const item2 = document.getElementById('item2');
const item3 = document.getElementById('item3');

item1.addEventListener('click', () => {
  swapElementsWithAnimation(item1, item2);
});

item2.addEventListener('click', () => {
  swapElementsWithAnimation(item2, item3);
});