React中为Flex换行添加动画的实现求助

Flex布局的换行动作本身无法通过直接给容器加transition实现动画，因为换行属于布局突变行为，不是可过渡的CSS属性变化。以下是两种可行的实现方式：

方法一：用Grid布局模拟Flex换行并添加过渡 #

利用Grid的auto-fit和minmax实现自适应换行，子元素的尺寸、位置变化可通过transition平滑过渡：

修改后的CSS #

.flex_box {
  background-color: yellow;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.child_Containers {
  height: 200px;
  background-color: green;
  transition: all 0.3s ease;
}

React组件代码无需改动，容器尺寸变化时，子元素会平滑调整，实现类似换行的动画效果。

方法二：JavaScript监听尺寸变化触发动画 #

若必须使用Flex布局，可通过监听容器尺寸变化，给子元素添加过渡效果：

修改后的React组件 #

import { useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
  const flexRef = useRef(null);

  useEffect(() => {
    const handleResize = () => {
      // 触发重绘确保过渡生效
      flexRef.current?.childNodes.forEach(child => {
        child.style.transform = "translateZ(0)";
      });
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <div className="App">
      <div ref={flexRef} className="flex_box">
        <div className="child_Containers"></div>
        <div className="child_Containers"></div>
        <div className="child_Containers"></div>
        <div className="child_Containers"></div>
        <div className="child_Containers"></div>
        <div className="child_Containers"></div>
      </div>
    </div>
  );
}

对应CSS #

.flex_box {
  background-color: yellow;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px;
}

.child_Containers {
  height: 200px;
  background-color: green;
  flex: 1 1 200px;
  transition: all 0.3s ease;
}

说明 #

• 方法一代码更简洁，是优先推荐的方案；
• 方法二通过监听resize事件触发过渡，适配必须使用Flex的场景。

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