React中如何实现按钮5秒后显示效果

一、CSS实现方案 #

你的CSS代码存在几个问题：opacity的取值范围是0到1的小数（不是100）；动画执行后会默认回到初始状态，需要添加animation-fill-mode: forwards来保持结束状态；初始应该把按钮设为透明，不然一开始就会显示。

修正后的完整CSS代码：

.delayed-button {
  opacity: 0; /* 初始透明状态 */
  animation-delay: 5s; /* 延迟5秒执行动画 */
  animation-duration: 0.3s; /* 过渡动画时长，可按需调整 */
  animation-name: fadeIn;
  animation-fill-mode: forwards; /* 保持动画结束后的最终状态 */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

在React组件中直接使用：

import './styles.css';

function App() {
  return (
    <button className="delayed-button">5秒后显示的按钮</button>
  );
}

export default App;

二、JavaScript实现方案 #

利用React的状态管理+定时器，逻辑更灵活，还能随时控制显示/隐藏：

import { useState, useEffect } from 'react';

function App() {
  const [showButton, setShowButton] = useState(false);

  useEffect(() => {
    // 设置5秒定时器，到时修改状态显示按钮
    const timer = setTimeout(() => {
      setShowButton(true);
    }, 5000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, []);

  return (
    <>
      {showButton && <button>5秒后显示的按钮</button>}
    </>
  );
}

export default App;

你提供的原始代码 #

animation-delay: 5s;
  animation-duration: 1ms;
  animation-name: slidein;
  opacity: 100;

}

@keyframes slidein {
  from {
      opacity:0;
  }

  to {
 opacity: 100;
  }
}

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