当前位置：首页 > 文章列表 > 文章 > 前端 > React卡片水平滚动动画实现方法

React卡片水平滚动动画实现方法

2026-03-01 22:18:53 0浏览收藏

✅ 完整代码实现

App.js（主容器组件）

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

const data = [
  { Name: "China" },
  { Name: "Japan" },
  { Name: "Germany" },
  { Name: "Brazil" },
  { Name: "Canada" },
  { Name: "Australia" },
  { Name: "Nigeria" },
  { Name: "Mexico" }
];

export default function App() {
  const containerRef = useRef(null);
  const [containerWidth, setContainerWidth] = useState("100%");
  const [playState, setPlayState] = useState("paused");

  // 动态计算容器总宽度（含所有卡片及 margin），并启动动画
  useEffect(() => {
    if (containerRef.current) {
      const width = containerRef.current.scrollWidth;
      setContainerWidth(`${width}px`);
      setPlayState("running");
    }
  }, []);

  return (
    
      
        {data.map((item, idx) => (
          
        ))}
      
    
  );
}

Card.js（卡片子组件，保持轻量无状态）

export default function Card({ cardName }) {
  return (
    
      
        
          {cardName}
        
      
    
  );
}

styles.css（关键动画样式）

.App {
  overflow: hidden; /* 隐藏超出视口的内容，形成“窗口”效果 */
  padding: 20px 0;
}

.card {
  width: 200px !important;
  height: 200px;
  background: #ffffff;
  box-shadow: 0px 1px 4px 1px rgba(158, 151, 151, 0.25);
  border-radius: 15px;
  margin: 12px;
  padding: 12px;
}

/* 滚动容器：flex 布局 + 自定义动画 */
.card-container {
  display: flex;
  transform: translateX(calc(100vw)); /* 起始位置：完全在视口右侧 */
  animation: scrollHorizontal 12s linear infinite;
  animation-play-state: paused; /* 初始暂停，由 JS 启动 */
}

@keyframes scrollHorizontal {
  from {
    transform: translateX(calc(100vw));
  }
  to {
    transform: translateX(calc(-100%)); /* 终点：向左移动自身总宽度 */
  }
}

/* 可选：鼠标悬停暂停动画（提升用户体验） */
.card-container:hover {
  animation-play-state: paused;
}

⚠️ 注意事项与优化建议

宽度动态性：scrollWidth 在首次渲染后才可读取，因此必须用 useEffect + ref 获取；若卡片内容异步加载（如图片），需监听 resize 或使用 ResizeObserver 进行二次校准。
无缝循环：当前方案依赖 to: translateX(-100%) —— 即容器自身宽度。确保 .card-container 的 width 样式与 scrollWidth 严格一致，否则会出现“卡顿”或“跳帧”。本例中通过内联 style.width 强制同步。
性能保障：transform 和 opacity 是仅有的两个能触发 GPU 加速的 CSS 属性，本方案全程只操作 transform，无布局重排（reflow），60fps 稳定。
可扩展性：如需支持双向滚动、变速、或点击暂停/播放，只需扩展 playState 状态及对应事件处理器，CSS 动画本身无需修改。
响应式适配：若需适配移动端，建议将 100vw 替换为 100dvw（动态视口单位），并在小屏下降低 animation-duration 或禁用动画。

该方案已验证于 Chrome/Firefox/Safari，无 polyfill 依赖，代码简洁、逻辑清晰、易于测试与维护，是 React 水平自动滚动场景的推荐实践。

终于介绍完啦！小伙伴们，这篇关于《React卡片水平滚动动画实现方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！