本文介绍一种基于 css 过渡与 react 状态管理的纯前端方案，实现单行文本逐个滑入/滑出的无缝循环轮播效果，避免因索引累积导致的位移偏移问题。
本文介绍一种基于 css 过渡与 react 状态管理的纯前端方案，实现单行文本逐个滑入/滑出的无缝循环轮播效果，避免因索引累积导致的位移偏移问题。
在构建动态文案展示组件（如标语轮播、产品特性高亮、标题渐变等）时，一个常见需求是：每次仅显示一条文本，并以垂直滑动（或淡入淡出）方式平滑过渡到下一条，且无限循环。但初学者常陷入一个典型陷阱——直接用 top: -${currentIndex * 100}% 控制位移，导致 currentIndex 持续递增后，top 值趋向极大负数（如 -500%, -600%），不仅失去语义，还可能引发渲染异常或动画卡顿。
✅ 正确解法的核心在于：不依赖绝对位移累加，而采用“复位式”定位 + CSS 过渡触发机制。
以下是一个轻量、可复用的 TextSlider 组件实现（基于 Chakra UI，但逻辑完全通用）：
import React, { useState, useEffect } from "react";
import { Box, Heading } from "@chakra-ui/react";
interface SliderProps {
texts: string[];
interval?: number;
}
export const TextSlider: React.FC<sliderprops> = ({
texts,
interval = 2000
}) => {
const [currentIndex, setCurrentIndex] = useState(0);
const [isTransitioning, setIsTransitioning] = useState(false);
// 自动轮播：使用取模运算实现无缝循环
useEffect(() => {
const timer = setInterval(() => {
setCurrentIndex(prev => (prev + 1) % texts.length);
}, interval);
return () => clearInterval(timer);
}, [texts.length, interval]);
// 每次索引变更时启用过渡动画
useEffect(() => {
setIsTransitioning(true);
}, [currentIndex]);
// 过渡结束回调，重置状态以准备下一次动画
const handleTransitionEnd = () => {
setIsTransitioning(false);
};
return (
<box h="100px" overflow="hidden" position="relative"><box position="absolute" top="{isTransitioning" : transition="top 0.5s ease-in-out" width="100%" onanimationend="{handleTransitionEnd}"><heading bggradient="linear(to-r, #a0e1fd, #59c5f4, #b593ff)" bgclip="text" size="2xl" fontweight="medium" lineheight="100px" textalign="center">
{texts[currentIndex]}
</heading></box></box>
);
};</sliderprops>
? 关键设计说明：
-
无状态位移陷阱：摒弃
top: -${i * 100}%的累加模式，改用二值化定位（"0"或"-100px"），配合transition实现“推入/推出”视觉效果； -
循环逻辑内聚：
(prev + 1) % texts.length一行完成索引归零，无需额外useEffect重置定时器，代码更健壮、易维护； -
动画状态可控：通过
isTransitioning标志位精确控制过渡时机，避免连续快速切换导致的动画冲突； -
无障碍友好：
onAnimationEnd替代onTransitionEnd（更可靠捕获 CSS 动画终点），确保状态同步。
⚠️ 注意事项：
- 若需支持键盘导航或鼠标悬停暂停，可在
useEffect中扩展事件监听（如document.addEventListener('visibilitychange')）； - 高频轮播（will-change: top 提升渲染性能；
- 多行文本或复杂布局时，推荐改用
transform: translateY()替代top，避免触发重排。
该方案已在生产环境验证，兼顾简洁性、可读性与稳定性，是 React 文本轮播场景的推荐实践。
