在 React 中为 MUI Snackbar 组件添加过渡效果

在 React 项目中使用 MUI（Material UI）框架开发时，Snackbar 组件常用于向用户展示轻量级的通知提示。默认情况下 Snackbar 的显示和隐藏过渡效果比较基础，实际开发中我们往往需要根据业务场景自定义过渡动画，让提示交互更符合产品的视觉规范。下面我们就结合实际代码示例，讲解如何为 MUI Snackbar 组件添加自定义过渡效果。

前置准备

首先需要确保项目中已经安装了 MUI 相关依赖，核心需要的包包括 @mui/material 和 @mui/material-next（如果使用最新版本），过渡效果相关的组件依赖 @mui/material/transitions，React 过渡动画还需要 react-transition-group 支持，可通过以下命令安装依赖：

# 安装 MUI 核心依赖
npm install @mui/material @emotion/react @emotion/styled
# 安装过渡动画依赖
npm install react-transition-group

MUI 内置过渡组件的使用

MUI 已经内置了多种常见的过渡动画组件，包括 Fade（淡入淡出）、Slide（滑动）、Grow（缩放）、Collapse（折叠）等，我们可以直接将这些组件作为 Snackbar 的 TransitionComponent 属性传入，快速实现过渡效果。下面是使用 Slide 过渡的示例：

import React, { useState } from 'react';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import Slide from '@mui/material/Slide';

// 定义 Slide 过渡组件，设置从顶部滑入的方向
function SlideTransition(props) {
  return <Slide {...props} direction="down" />;
}

export default function CustomSnackbar() {
  const [open, setOpen] = useState(false);

  // 打开 Snackbar
  const handleOpen = () => {
    setOpen(true);
  };

  // 关闭 Snackbar
  const handleClose = (event, reason) => {
    // 防止点击外部或按ESC关闭，仅允许点击关闭按钮关闭
    if (reason === 'clickaway' || reason === 'escapeKeyDown') {
      return;
    }
    setOpen(false);
  };

  return (
    <div style={{ padding: '20px' }}>
      <Button variant="contained" onClick={handleOpen}>
        显示通知
      </Button>
      <Snackbar
        open={open}
        onClose={handleClose}
        TransitionComponent={SlideTransition}
        message="这是一条带滑动过渡效果的通知"
        key={SlideTransition.name}
        autoHideDuration={3000}
      />
    </div>
  );
}

上面的代码中，我们自定义了 SlideTransition 组件，设置了滑动方向为 down（从顶部向下滑入），然后将该组件赋值给 Snackbar 的 TransitionComponent 属性。同时为了每次打开时过渡效果都能正常触发，我们给 Snackbar 添加了 key 属性，值为过渡组件的名称。

自定义过渡动画逻辑

如果内置的过渡效果无法满足需求，我们还可以结合 react-transition-group 的 Transition 组件，自定义过渡的状态和样式。下面是一个自定义淡入时缩放、淡出时渐隐的过渡效果示例：

import React, { useState } from 'react';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import { Transition } from 'react-transition-group';

// 定义过渡过程的样式映射
const defaultStyle = {
  transition: 'all 300ms ease-in-out',
  opacity: 0,
  transform: 'scale(0.8)',
};

const transitionStyles = {
  entering: { opacity: 1, transform: 'scale(1)' },
  entered: { opacity: 1, transform: 'scale(1)' },
  exiting: { opacity: 0, transform: 'scale(0.8)' },
  exited: { opacity: 0, transform: 'scale(0.8)' },
};

// 自定义过渡组件
function CustomTransition(props) {
  const { in: inProp, children, ...rest } = props;
  return (
    <Transition in={inProp} timeout={300} {...rest}>
      {(state) => (
        <div
          style={{
            ...defaultStyle,
            ...transitionStyles[state],
          }}
        >
          {children}
        </div>
      )}
    </Transition>
  );
}

export default function CustomTransitionSnackbar() {
  const [open, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = (event, reason) => {
    if (reason === 'clickaway' || reason === 'escapeKeyDown') {
      return;
    }
    setOpen(false);
  };

  return (
    <div style={{ padding: '20px' }}>
      <Button variant="contained" onClick={handleOpen}>
        显示自定义过渡通知
      </Button>
      <Snackbar
        open={open}
        onClose={handleClose}
        TransitionComponent={CustomTransition}
        message="这是带自定义缩放过渡效果的通知"
        key="custom-transition"
        autoHideDuration={3000}
      />
    </div>
  );
}

在这个示例中，我们通过 react-transition-group 的 Transition 组件监听过渡状态，根据状态（entering、entered、exiting、exited）动态设置元素的样式，实现了缩放加淡入淡出的组合过渡效果。你可以根据需要调整 defaultStyle 和 transitionStyles 中的样式规则，实现更符合需求的动画效果。

注意事项

• 当使用自定义过渡组件时，需要确保过渡的 timeout 时间和 Snackbar 的 autoHideDuration 匹配，避免出现动画还没结束就关闭的情况。
• 如果 Snackbar 需要支持动态更新内容，建议给过渡组件设置唯一的 key，避免过渡状态错乱。
• 过渡效果的性能需要关注，复杂的 CSS 动画如果在低端设备上可能会出现卡顿，建议优先使用 transform 和 opacity 这类不会触发重排的属性做动画。

ReactMUI_Snackbar过渡动画自定义组件react-transition-group 本作品最后修改时间：2026-05-22 16:15:40