如何实现Flex容器中两个元素交换位置的动画效果？

Great question! Animating element swaps in a Flex container takes a mix of CSS transition magic and JavaScript to handle position calculations. Let’s walk through a practical solution using your existing code as a starting point.

Step 1: Update CSS for Smooth Transitions #

First, we’ll add a transition to your .number class so any position changes animate smoothly. We’ll also add position: relative to help with accurate position calculations later:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: red;
  width: 150px;
  margin: 4px;
  margin-top: 9px;
  box-shadow: 4px 4px 6px black;
}

.number {
  padding: 4px;
  margin-left: 8px;
  margin-right: 8px;
  background-color: navy;
  color: white; /* Added for better readability */
  transition: transform 0.5s ease; /* Add smooth animation transition */
  position: relative; /* Required for offset calculations */
}

.one {
  text-decoration: underline; /* Finished your partial CSS property */
}

Step 2: JavaScript to Handle the Swap Animation #

We’ll create a function that:

1. Calculates the current positions of the two elements you want to swap
2. Uses transform: translate() to animate each element to the other’s spot
3. Updates the actual DOM order once the animation finishes
4. Resets transforms so future animations work correctly

Here’s the full code including a trigger button:

<div class="container">
  <div class="number one">1</div>
  <div class="number">2</div>
  <div class="number three">3</div>
</div>
<button onclick="swapElements(document.querySelector('.one'), document.querySelector('.three'))">Swap 1 and 3</button>

<script>
function swapElements(el1, el2) {
  // Get the current screen positions of both elements
  const rect1 = el1.getBoundingClientRect();
  const rect2 = el2.getBoundingClientRect();
  
  // Calculate how far each element needs to move
  const distanceX = rect1.left - rect2.left;
  const distanceY = rect1.top - rect2.top;
  
  // Animate elements to each other's positions
  el1.style.transform = `translate(${distanceX * -1}px, ${distanceY * -1}px)`;
  el2.style.transform = `translate(${distanceX}px, ${distanceY}px)`;
  
  // Wait for animation to finish, then permanently swap in DOM
  setTimeout(() => {
    const parent = el1.parentElement;
    const el1Next = el1.nextSibling;
    const el2Next = el2.nextSibling;
    
    // Handle different sibling positions
    if (el1 === el2.previousElementSibling) {
      parent.insertBefore(el2, el1);
    } else {
      parent.insertBefore(el2, el1Next);
      parent.insertBefore(el1, el2Next);
    }
    
    // Reset transforms for future animations
    el1.style.transform = '';
    el2.style.transform = '';
  }, 500); // Match the transition duration from CSS
}
</script>

How This Works #

• The CSS transition ensures the position shift animates smoothly over 0.5 seconds
• JavaScript calculates the exact distance each element needs to move using getBoundingClientRect()
• After the animation completes, we adjust the DOM order so elements stay swapped permanently
• Resetting transforms ensures subsequent swaps work correctly

Alternative: Simplified Swap with Fade/Scale #

If you don’t need a full slide animation, you can use Flex’s order property combined with a fade/scale transition for a simpler effect:

.number {
  /* ... existing styles ... */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.number.swapping {
  opacity: 0;
  transform: scale(0.8);
}

And the corresponding JavaScript:

function swapWithOrder(el1, el2) {
  // Trigger fade/scale out
  el1.classList.add('swapping');
  el2.classList.add('swapping');
  
  setTimeout(() => {
    // Swap Flex order properties
    const tempOrder = el1.style.order || '0';
    el1.style.order = el2.style.order || '0';
    el2.style.order = tempOrder;
    
    // Fade/scale back in
    el1.classList.remove('swapping');
    el2.classList.remove('swapping');
  }, 200);
}

This approach is quicker to implement but doesn’t provide the smooth sliding motion of the transform method.

内容的提问来源于stack exchange，提问作者AIDAN KUKOSKY