如何用React和Tailwind实现无卡顿的无限滚动Logo轮播？

问题描述 #

开发基于React的水平轮播组件，使用CSS动画实现无缝滚动效果，轮播基本可用，但动画重启时出现明显跳帧/卡顿，需要实现无中断、完全流畅的连续滚动。

现有代码 #

React组件代码 #

import React from "react";
import ClienteLogo from "../ClienteLogo/ClienteLogo";

const ClienteLogos = [
  "./docebeijo.svg",
  "./find.png",
  "./logoa.png",
  "./logo.svg",
  "./logo.png",
  "./logob.svg",
  "./logo-magcom.png",
];

const ClientesSlider = () => {
  const totalLogos = ClienteLogos.length;
  const logoWidth = 176; // 手动计算的单个logo宽度+padding
  const totalWidth = logoWidth * totalLogos;

  return (
    <div className="flex w-full justify-center overflow-hidden">
      <div
        className="flex animate-infinite-scroll flex-row gap-10 py-10"
        style={{
          width: `${totalWidth}px`,
          animationDuration: "20s",
        }}
      >
        {[...ClienteLogos, ...ClienteLogos].map((url, index) => (
          <ClienteLogo key={index} url={url} />
        ))}
      </div>
    </div>
  );
};

export default ClientesSlider;

Tailwind CSS配置 #

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      keyframes: {
        "infinite-scroll": {
          "0%": { transform: "translateX(0)" },
          "100%": { transform: "translateX(-100%)" },
        },
      },
      animation: { "infinite-scroll": "infinite-scroll linear infinite" },
    },
  },
  plugins: [],
};

核心问题 #

• 动画重启时出现跳帧/卡顿
• 无法实现无中断的无缝循环滚动

已尝试方案 #

• 调整动画时长
• 修改宽度计算方式
• 更换Tailwind CSS配置

解决方案建议 #

1. 动态计算元素宽度，避免手动误差 #

手动计算的logoWidth容易和实际渲染的元素尺寸不符，导致动画结束时错位卡顿。改用动态获取实际元素尺寸：

import React, { useEffect, useRef, useState } from "react";
import ClienteLogo from "../ClienteLogo/ClienteLogo";

const ClienteLogos = [
  "./docebeijo.svg",
  "./find.png",
  "./logoa.png",
  "./logo.svg",
  "./logo.png",
  "./logob.svg",
  "./logo-magcom.png",
];

const ClientesSlider = () => {
  const containerRef = useRef(null);
  const [totalWidth, setTotalWidth] = useState(0);
  const gap = 40; // 对应Tailwind的gap-10（10*4px）

  useEffect(() => {
    if (!containerRef.current) return;
    const firstLogo = containerRef.current.querySelector(".cliente-logo");
    if (!firstLogo) return;
    // 获取单个logo的实际渲染宽度
    const logoWidth = firstLogo.getBoundingClientRect().width;
    // 计算单份logo的总宽度（包含间隙）
    const singleTotalWidth = (logoWidth + gap) * ClienteLogos.length - gap;
    setTotalWidth(singleTotalWidth);
  }, []);

  return (
    <div className="flex w-full justify-center overflow-hidden">
      <div
        ref={containerRef}
        className="flex animate-infinite-scroll flex-row gap-10 py-10"
        style={{
          width: `${totalWidth}px`,
          animationDuration: "20s",
          willChange: "transform", // 提示浏览器优化动画性能
        }}
      >
        {[...ClienteLogos, ...ClienteLogos].map((url, index) => (
          <ClienteLogo key={index} url={url} className="cliente-logo" />
        ))}
      </div>
    </div>
  );
};

export default ClientesSlider;

2. 优化动画性能 #

添加will-change: transform属性，告诉浏览器提前为transform动画分配GPU资源，减少卡顿。也可以在Tailwind中扩展工具类：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      keyframes: {
        "infinite-scroll": {
          "0%": { transform: "translateX(0)" },
          "100%": { transform: "translateX(-100%)" },
        },
      },
      animation: { "infinite-scroll": "infinite-scroll linear infinite" },
      willChange: {
        transform: "transform",
      },
    },
  },
  plugins: [],
};

之后可以直接用will-change-transform类替代行内样式的willChange。

3. 确保动画状态完全衔接 #

动画从translateX(0)到translateX(-100%)时，容器宽度必须等于单份logo的总宽度，这样动画结束时第二份logo的第一个元素刚好和容器起始位置对齐，实现无缝循环。动态计算宽度能确保这一点。

4. 避免布局重绘 #

确保动画仅修改transform属性（该属性由GPU加速，不会触发页面重排重绘），不要在动画中修改width、margin等会影响布局的属性。

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