如何在React中使用Tailwind实现div从左到右的长度填充动画？

当然可以啦！用React搭配Tailwind完全能轻松实现你想要的这种div从左到右长度递增的效果，给你分享几个实用的实现思路：

静态固定长度递增 #

如果是要渲染一组长度依次固定递增的div，直接用Tailwind的宽度类结合循环就能搞定：

import React from 'react';

const GrowingDivs = () => {
  // 定义每个div的宽度比例，从1/4到满宽
  const widthClasses = ['w-1/4', 'w-1/2', 'w-3/4', 'w-full'];
  
  return (
    <div className="flex flex-col gap-2 p-4">
      {widthClasses.map((width, index) => (
        <div 
          key={index}
          className={`h-8 bg-blue-500 ${width} transition-all duration-300`}
        />
      ))}
    </div>
  );
};

export default GrowingDivs;

这里给每个div加了transition-all duration-300，让初始渲染时的长度变化更平滑，不会显得生硬。

交互式动态增长 #

如果想要实现鼠标hover或者触发事件后从左到右增长的效果，结合Tailwind的状态类和变换原点类就能实现：

import React from 'react';

const InteractiveGrowingDiv = () => {
  return (
    <div className="flex flex-col gap-2 p-4">
      {/* 单个div的hover增长效果 */}
      <div 
        className="h-8 bg-green-500 w-1/4 hover:w-full transition-all duration-500 origin-left"
      />
      
      {/* 多个div依次固定递增的效果 */}
      {[1,2,3,4].map((item) => (
        <div 
          key={item}
          className={`h-8 bg-purple-500 transition-all duration-500 origin-left`}
          style={{ width: `${25 * item}%` }}
        />
      ))}
    </div>
  );
};

export default InteractiveGrowingDiv;

这里的origin-left是关键，它指定了宽度变化的原点是左侧，这样就能保证增长方向是从左到右，而不是默认的从中间向两边扩展。

时序动画：逐个依次增长 #

如果需要更有层次感的动画，比如让div从第一个到第四个依次从左到右增长，可以结合React的状态和定时器来控制：

import React, { useEffect, useState } from 'react';

const SequentialGrowingDivs = () => {
  const [divWidths, setDivWidths] = useState([0, 0, 0, 0]);

  useEffect(() => {
    divWidths.forEach((_, index) => {
      setTimeout(() => {
        setDivWidths(prev => {
          const newWidths = [...prev];
          newWidths[index] = 25 * (index + 1);
          return newWidths;
        });
      }, 300 * index);
    });
  }, []);

  return (
    <div className="flex flex-col gap-2 p-4">
      {divWidths.map((width, index) => (
        <div 
          key={index}
          className="h-8 bg-orange-500 transition-all duration-500 origin-left"
          style={{ width: `${width}%` }}
        />
      ))}
    </div>
  );
};

export default SequentialGrowingDivs;

这个组件会让div按顺序逐个从左到右增长，每个间隔300ms，动画流畅又有节奏感。

总的来说，核心就是利用Tailwind的宽度类、过渡类和变换原点类，再结合React的渲染逻辑或者状态管理，就能完美实现你要的效果啦！

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