React中能否使用CSS transition？如何为按钮添加过渡效果？

直接通过{showButton && <Button />}的条件渲染会直接添加/移除DOM元素，无法触发CSS过渡。你可以通过始终保留DOM并切换类名，或者延迟卸载DOM配合过渡动画这两种方式实现需求：

方案一：类名切换（推荐，更简洁） #

保持按钮始终在DOM中，用状态控制类名来触发过渡效果：

组件代码 #

<Button
  onClick={() => setShowMessage(true)}
  size="lg"
  className={`button-transition ${showButton ? 'button-visible' : 'button-hidden'}`}
>
  Show Message
</Button>

CSS样式 #

/* 基础过渡配置 */
.button-transition {
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* 隐藏时禁用点击 */
}

/* 显示状态 */
.button-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* 恢复点击 */
}

/* 隐藏状态 */
.button-hidden {
  opacity: 0;
  transform: translateY(10px); /* 可选：添加位移增强过渡效果 */
}

解释：按钮始终存在于DOM中，通过切换button-visible/button-hidden类触发CSS过渡，pointer-events用来避免用户点击到不可见的按钮。

方案二：延迟卸载DOM（适合必须移除DOM的场景） #

如果需要在过渡完成后彻底移除按钮DOM，可以结合useEffect和定时器实现延迟卸载：

组件代码 #

import { useState, useEffect } from 'react';

// ...

const [isButtonRendered, setIsButtonRendered] = useState(showButton);

useEffect(() => {
  if (showButton) {
    setIsButtonRendered(true);
  } else {
    // 等待过渡完成后再移除DOM，时长要和CSS过渡时长一致
    const timer = setTimeout(() => setIsButtonRendered(false), 300);
    return () => clearTimeout(timer);
  }
}, [showButton]);

return (
  <>
    {isButtonRendered && (
      <Button
        onClick={() => setShowMessage(true)}
        size="lg"
        className={`button-transition ${showButton ? 'button-visible' : 'button-hidden'}`}
      >
        Show Message
      </Button>
    )}
  </>
);

CSS样式和方案一完全相同 #

注意事项 #

• 不要用display: none控制显示隐藏，该属性无法触发CSS过渡；优先选择opacity、transform这类支持过渡的属性。
• 如果使用第三方组件库的Button（如Ant Design、MUI），需确保自定义类名优先级足够覆盖组件默认样式，可通过嵌套选择器（如.ant-btn.button-transition）实现。

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