React Bootstrap如何实现模态框仅首次显示、末次关闭时播放动画

不要全局修改fade类样式，直接利用Modal组件原生提供的animation属性控制单模态框的动画开关即可，这是官方支持的写法，不存在反模式问题，也不会引发全局样式冲突。

核心逻辑 #

完全匹配目标交互规则，只需要跟踪模态框的打开/切换/关闭状态，动态给所有模态框传入统一的动画开关值即可：

• 从页面主界面（无任何模态框）打开第一个模态框时，开启动画，实现首个模态框淡入效果
• 模态框之间互相切换时，全程关闭动画，中间模态框无任何入场、出场效果
• 关闭最后一个模态框回到主界面时，开启动画，实现最后一个模态框淡出效果

可直接复用的代码示例 #

import { useState, useRef } from 'react';
import { Modal, Button } from 'react-bootstrap';

// 模态框唯一标识枚举
const MODAL_TYPES = {
  REGISTER: 'register',
  ACCOUNT_SETTING: 'accountSetting'
};

export default function SmoothMultiModal() {
  // 当前激活显示的模态框，null表示无模态框显示
  const [activeModal, setActiveModal] = useState(null);
  // 全局动画开关
  const [animationEnabled, setAnimationEnabled] = useState(false);
  // 记录上一次的模态框状态，用于判断操作类型
  const prevModalRef = useRef(null);

  // 打开首个模态框
  const openFirstModal = (modalType) => {
    setAnimationEnabled(true);
    prevModalRef.current = modalType;
    setActiveModal(modalType);
  };

  // 模态框之间互相切换
  const switchModal = (targetModalType) => {
    setAnimationEnabled(false);
    prevModalRef.current = targetModalType;
    setActiveModal(targetModalType);
  };

  // 关闭最后一个模态框
  const closeLastModal = () => {
    setAnimationEnabled(true);
    prevModalRef.current = null;
    setActiveModal(null);
  };

  return (
    <div className="page-container">
      <Button onClick={() => openFirstModal(MODAL_TYPES.REGISTER)}>
        打开注册弹窗
      </Button>

      {/* 注册模态框 */}
      <Modal
        show={activeModal === MODAL_TYPES.REGISTER}
        animation={animationEnabled}
        onHide={closeLastModal}
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title>注册账号</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>注册表单内容</p>
          <Button 
            variant="link" 
            onClick={() => switchModal(MODAL_TYPES.ACCOUNT_SETTING)}
          >
            已有账号？去账号设置
          </Button>
        </Modal.Body>
      </Modal>

      {/* 账号设置模态框 */}
      <Modal
        show={activeModal === MODAL_TYPES.ACCOUNT_SETTING}
        animation={animationEnabled}
        onHide={closeLastModal}
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title>账号设置</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>账号设置表单内容</p>
          <Button 
            variant="link" 
            onClick={() => switchModal(MODAL_TYPES.REGISTER)}
          >
            没有账号？去注册
          </Button>
        </Modal.Body>
      </Modal>
    </div>
  );
}

注意事项 #

• 不需要给模态框切换加延迟等待，React会自动批量处理状态更新，不会出现两个模态框同时渲染导致的闪烁问题
• 如果是多层模态框叠放（非替换切换）的场景，只需要把状态判断逻辑换成跟踪模态框栈长度即可：栈长度从0变为1时开入场动画，栈长度从1变为0时开出场动画，其余栈长度变动场景全部关闭动画，效果一致
• 不要通过覆写.fade类的CSS属性实现效果，会污染全局样式，影响页面其他用到淡入动画的组件，也容易引发重绘导致的闪烁

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