React项目中classnames库类绑定生效但CSS过渡效果不触发问题求助

问题核心原因 #

你遇到的过渡失效主要是4个错误导致的：

1. 直接条件销毁/创建DOM元素：{answer === i - 1 ? <div ... /> : null}的写法会让元素直接从DOM树删除/插入，没有给CSS过渡留属性变化的时间
2. 过渡属性位置错误：transition规则需要放在元素的基础类上，而非触发状态的类上，否则状态切换时才加载过渡规则，无法生效
3. 类名不匹配：CSS中定义的类是.text--shown，JS中引用的是styles["textShown"]，CSS Modules的类名映射不匹配
4. 状态逻辑错误：判断显示用的answer变量未定义、classnames的条件写为永远为真的状态更新函数setText，导致状态逻辑完全不符合预期

修正方案 #

不需要引入额外类库，只要修改渲染逻辑、类名和状态即可：

修正后JSX代码

import { useState } from 'react';
import classnames from 'classnames';
import styles from './你的css文件路径.module.css';

function Text(props) {
    // 存储当前显示的文本索引，初始值设为-1表示全部不显示
    const [activeIndex, setActiveIndex] = useState(-1);

    const handleText = (e) => {
        const targetId = Number(e.target.dataset.id);
        // 点击相同项则收起，否则切换为当前项
        setActiveIndex(prev => prev === targetId - 1 ? -1 : targetId - 1);
    };

    return (
        <section>
            <div onClick={handleText}>
                {props.text.map((text, i) => {
                    // 永远渲染元素，用类名控制显隐和过渡
                    const className = classnames(styles.text, {
                        [styles.textShown]: activeIndex === i - 1
                    });
                    return (
                        <div key={i} data-id={i}>
                            <div className={className}>
                                {text}
                            </div>
                        </div>
                    );
                })}
            </div>
        </section>
    );
}

修正后CSS Module代码

.text {
    margin-bottom: 20px;
    width: 300px;
    margin-left: 20px;
    padding: 0 20px; /* 初始上下padding为0，用来做展开过渡 */
    max-height: 0; /* 初始高度为0 */
    opacity: 0; /* 初始透明度为0 */
    overflow: hidden; /* 隐藏超出内容 */
    text-align: left;
    /* 过渡规则放在基础类，所有属性变化都触发200ms过渡 */
    transition: all 200ms ease 0s;
}

/* 状态类控制展开后的样式 */
.textShown {
    max-height: 1000px; /* 设为远大于文本最大高度的值即可实现平滑高度过渡 */
    padding: 20px;
    opacity: 1;
}

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