React中实现文本切换时的CSS淡入淡出动画问题及代码优化咨询

嘿，我看了你这段想在文本切换时加淡入淡出动画的代码，发现几个可以调整的地方，既能实现流畅的动画效果，还能优化React组件的逻辑哦~

首先先说说你当前React代码里的小问题：

• 你的setInterval清理逻辑有问题：现在clearInterval(inter)写在changeHome函数里，这就导致文本只切换一次就停止了，因为定时器只跑了一轮就被清掉了。正确的做法是把定时器的清理放在useEffect的返回函数里，作为组件卸载或者依赖变化时的副作用清理，还能避免内存泄漏。
• 状态更新用函数式更新更稳妥：因为你是基于上一次的role状态来更新新值，用setRole(prevRole => prevRole === "Text A" ? "Text B" : "Text A")这种写法，能避免闭包导致的旧状态引用问题。
• 动画触发逻辑：你现在给h2固定加了fade类，这样动画只会在组件首次渲染时执行一次，没法在每次文本切换时触发。我们可以结合状态来控制动画类的切换，或者用CSS过渡来监听状态变化时的样式改变。

接下来是CSS动画的实现思路，我给你两种常见的淡入淡出方案：

方案一：用CSS过渡（transition）实现平滑切换 #

我们可以给文本容器设置opacity和transition属性，当状态变化时，先让当前文本淡出，等动画结束后再更新状态，然后让新文本淡入。不过更简单的方式是利用React的状态更新，结合CSS的transition，给h2设置初始的透明和过渡属性，然后在状态变化时触发样式变化。

方案二：用CSS关键帧（@keyframes）定义淡入淡出动画 #

直接定义fade-in和fade-out的关键帧动画，然后在文本切换时动态添加/移除动画类。

下面是优化后的完整代码：

优化后的React组件代码

import { useState, useEffect } from 'react';

function Home() {
  const [role, setRole] = useState("Text A");
  const [isAnimating, setIsAnimating] = useState(false);

  useEffect(() => {
    // 启动定时器，每5秒切换一次文本
    const intervalId = setInterval(() => {
      setIsAnimating(true);
      // 先触发淡出动画，等动画结束后更新状态
      setTimeout(() => {
        setRole(prevRole => prevRole === "Text A" ? "Text B" : "Text A");
        setIsAnimating(false);
      }, 500); // 这个时间要和CSS动画时长一致
    }, 5000);

    // 组件卸载时清理定时器
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div id="home">
      <div className="text">
        <span>Hello!</span>
        <h1>
          I'm <span>Karim Isaac</span>
        </h1>
        <h2 className={`${isAnimating ? 'fade-out' : 'fade-in'}`}>{role}</h2>
      </div>
    </div>
  );
}

export default Home;

对应的CSS代码

/* 定义淡入淡出的关键帧动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* 应用动画的类 */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

/* 给h2设置基础样式，避免动画跳动 */
.text h2 {
  opacity: 1;
  transition: none;
}

这样调整后，文本每5秒会先执行淡出动画，然后切换内容，再执行淡入动画，效果就流畅啦~ 另外，我还帮你优化了定时器的逻辑，现在组件卸载时会自动清理定时器，不会有内存泄漏的问题。

备注：内容来源于stack exchange，提问作者KIX