React与CSS过渡函数失效：Todo组件无法平滑滑出问题排查

开发中遇到问题：Todo子组件预期能平滑向侧边滑出可视区域，但实际动画瞬间完成，无过渡效果。

问题根源 #

当前代码通过完全替换类名（view ? "todo" : "todo-slide-out"）来触发动画，但切换到todo-slide-out类时，元素丢失了.todo类中的transition属性，导致transform属性的变化没有过渡动画，直接瞬间生效。

修改方案 #

采用类叠加的方式，保留基础样式的过渡属性，仅叠加滑出类修改transform值：

1. 调整JSX中的类名绑定：

<div className="container">
    <h1>Move along now</h1>
    <div className={`todo ${!view ? "todo-slide-out" : ""}`}>
        <div className="attributes">
            <h1>{hardTodo.title}</h1>
            <p>{hardTodo.content}</p>
        </div>           
        <div className="actions">
            <button onClick={() => deleteTodo()}>Delete Todo</button>
        </div>    
    </div>
</div>

2. 简化CSS中的滑出类：

.container {
  position: relative;
  overflow: hidden;
}

.todo {
  background: var(--geist-background);
  padding: 2rem;
  position: relative;
  transition: transform 3s ease-in;
  transform: translateX(0%);
}

.todo-slide-out {
  transform: translateX(100%);
}

效果说明 #

修改后，元素始终保留.todo类的transition属性，当view状态变化时，仅叠加todo-slide-out类来改变transform值，此时浏览器会识别到transform属性的变化，并应用预设的3秒过渡动画，实现平滑滑出的效果。

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