React使用useState切换类名实现淡入过渡，替代CSS :hover方案

核心问题说明 #

你当前的代码没有过渡效果是因为 display 属性属于瞬时切换的离散属性，不存在过渡中间帧，无法触发CSS transition动画。

调整步骤 #

1. 修改JSX类名逻辑 #

不要将task-icons和invisible-icons设为互斥类，而是把task-icons作为永久基础类，仅动态切换可见性控制类，保证过渡属性始终生效：

<div name="taskIcons" className={`task-icons ${hover ? '' : 'invisible-icons'}`}>

同时建议把状态切换逻辑从取反改为显式赋值，避免事件异常触发导致状态错乱：

const [hover, setHover] = useState(false)

// 替换原来的handleHover
const handleEnter = () => setHover(true)
const handleLeave = () => setHover(false)

// 绑定到标题元素
<h3 className='task-element task-title' 
  onMouseEnter={handleEnter} 
  onMouseLeave={handleLeave}
>{title}</h3>

2. 调整CSS样式 #

将显隐切换逻辑从display改为支持过渡的透明度、位移属性，同时可选添加宽度过渡避免隐藏时占用布局空间：

.task-icons {
  display: flex;
  white-space: nowrap;
  margin-top: 4px;
  margin-left: 8px;
  /* 明确指定过渡属性、时长和缓动效果 */
  transition: all 0.3s ease;
  /* 可见状态默认值 */
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  max-width: 200px; /* 足够容纳所有图标的宽度即可 */
  overflow: hidden;
}

.invisible-icons {
  /* 移除display: none */
  opacity: 0;
  transform: translateX(10px); /* 向右偏移，实现从右侧滑入效果 */
  visibility: hidden;
  pointer-events: none; /* 隐藏时禁止触发点击事件 */
  max-width: 0; /* 隐藏时收缩宽度，不占用布局空间 */
  margin-left: 0;
}

你可以根据自己的需求调整transition的时长，以及translateX的偏移量来控制滑入的距离。

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