如何用CSS实现每次闪烁切换新文本 在React中逐条展示用户评论

• 核心实现逻辑：将静态评论抽为配置数组，通过状态控制当前展示的单条评论，搭配定时器和CSS过渡动画实现闪烁切换效果

完整组件代码 #

import { useState, useEffect } from 'react';
import './TestimonialsCarousel.css';

// 抽离评论配置，后续新增评论直接修改该数组即可
const testimonials = [
  {
    content: '非常喜欢这个主题，客户支持的服务质量也让人印象深刻！对我这种几乎没什么经验的人来说太友好了，绝对超值！',
    author: 'Elena Doe',
    title: 'MEDIADOT 公开演讲者'
  },
  {
    content: '太惊艳了！完全物超所值，做的太棒了，感谢你们的出色产出！',
    author: 'John Doe',
    title: 'W.T.D. Ltd 开发工程师'
  },
  {
    content: 'Constellation是我们见过的最完善、文档最清晰、规划最周全的项目之一，为优秀的作品干杯！',
    author: 'John Doe',
    title: 'WESTWOOD 设计师'
  }
];

const TestimonialsCarousel = () => {
  // 存储当前展示的评论索引
  const [activeIndex, setActiveIndex] = useState(0);
  // 控制闪烁动画的显隐状态
  const [show, setShow] = useState(true);

  useEffect(() => {
    // 切换间隔可自行调整，单位毫秒，默认3000即3秒切换一次
    const interval = setInterval(() => {
      // 先隐藏触发淡出效果
      setShow(false);
      // 等动画完成后切换评论再显示，触发淡入即实现闪烁效果
      setTimeout(() => {
        setActiveIndex(prev => (prev + 1) % testimonials.length);
        setShow(true);
      }, 300); // 300毫秒需要和CSS过渡时长保持一致
    }, 3000);

    return () => clearInterval(interval);
  }, []);

  const current = testimonials[activeIndex];

  return (
    <ul id="testimonials-carosel">
      <div id="quote_wrap">
        <li className={`quote_item ${show ? 'show' : 'hide'}`}>
          <div className="quote_content">
            {current.content}
          </div>
          <div className="quote_author">
            <strong>{current.author}</strong> - {current.title}
          </div>
        </li>
      </div>
    </ul>
  );
};

export default TestimonialsCarousel;

配套CSS代码（新建TestimonialsCarousel.css） #

.quote_item {
  transition: opacity 0.3s ease;
}
.quote_item.hide {
  opacity: 0;
}
.quote_item.show {
  opacity: 1;
}

/* 如需更明显的闪烁动效可替换为以下样式 */
/*
.quote_item {
  transition: all 0.3s ease;
}
.quote_item.hide {
  opacity: 0;
  transform: translateY(10px);
}
.quote_item.show {
  opacity: 1;
  transform: translateY(0);
}
*/

可调整参数说明 #

• 切换间隔：修改setInterval的第二个参数，数值越大切换速度越慢
• 闪烁速度：同步修改setTimeout的第二个参数和CSS中transition的时长，数值越小闪烁越快
• 动效样式：可自行扩展CSS过渡属性，支持位移、缩放等自定义效果

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