ReactJS中Tabler/Bootstrap模态框CSS过渡效果优化问询

你当前用setTimeout来延迟添加show类的方式确实不够可靠，下面提供几个更优雅的替代方案：

方案1：用requestAnimationFrame替代固定延迟 #

浏览器的requestAnimationFrame会在下一次重绘前执行回调，能确保display:block已经生效，比固定100ms延迟更精准，不会出现延迟过长或过短的问题：

const handleEditClick = (row) => {
    setIsModalOpen(true);
    modalRef.current.style.display = "block";

    requestAnimationFrame(() => {
        modalRef.current.classList.add("show");
    });
};

方案2：结合React状态与useEffect（更符合React范式） #

把模态框的DOM操作逻辑放到useEffect中，监听isModalOpen状态变化，同时处理关闭时的过渡收尾：

import { useState, useRef, useEffect } from 'react';

// 状态与ref定义
const [isModalOpen, setIsModalOpen] = useState(false);
const modalRef = useRef(null);

useEffect(() => {
    if (isModalOpen && modalRef.current) {
        // 打开模态框：先设置display，再触发过渡
        modalRef.current.style.display = "block";
        requestAnimationFrame(() => {
            modalRef.current.classList.add("show");
        });
    } else if (modalRef.current) {
        // 关闭模态框：先移除过渡类，等过渡结束后再隐藏
        modalRef.current.classList.remove("show");
        const handleTransitionEnd = () => {
            modalRef.current.style.display = "none";
            modalRef.current.removeEventListener('transitionend', handleTransitionEnd);
        };
        modalRef.current.addEventListener('transitionend', handleTransitionEnd);
    }
}, [isModalOpen]);

// 点击事件只需更新状态
const handleEditClick = (row) => {
    setIsModalOpen(true);
};

这种方式把DOM操作和状态解耦，更符合React的状态驱动理念，同时也解决了关闭模态框时的过渡问题。

方案3：用CSS可见性属性替代display（最优解） #

完全抛弃display:none的切换逻辑，改用visibility、opacity和pointer-events来控制模态框的显示/隐藏，这样无需处理任何时序问题：

/* 模态框基础样式 */
.modal {
    visibility: hidden;
    opacity: 0;
    pointer-events: none; /* 默认禁止点击，避免遮挡下层内容 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* 其他模态框样式（如定位、背景等） */
}

/* 显示模态框的类 */
.modal.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto; /* 允许点击模态框内容 */
}

// React代码只需控制状态
const [isModalOpen, setIsModalOpen] = useState(false);

const handleEditClick = (row) => {
    setIsModalOpen(true);
};

// JSX中直接通过状态控制类名
return (
    <div className={`modal ${isModalOpen ? 'show' : ''}`} ref={modalRef}>
        {/* 模态框内容 */}
    </div>
);

这个方案无需任何DOM操作时序处理，纯通过CSS过渡和React状态实现，代码更简洁，也完全解决了透明模态框遮挡应用的问题。

内容的提问来源于stack exchange，提问作者Erik van de Ven