在 React 中使用 MUI 为 Snackbar 添加过渡效果

Snackbar 是移动端和Web端都常用的轻提示组件，MUI 提供的 Snackbar 组件默认带有基础的显示逻辑，但默认的过渡效果比较单调。我们可以通过自定义过渡组件，为 Snackbar 添加更丰富的进入和退出动画，提升用户交互体验。

前置准备

首先确保你的项目中已经安装了 MUI 核心库和样式库，如果还未安装可以通过下面的命令完成：

# 安装 MUI 核心包和样式引擎
npm install @mui/material @emotion/react @emotion/styled
# 如果需要使用图标等额外组件，也可以安装 MUI 图标包
npm install @mui/icons-material

基础 Snackbar 使用

我们先实现一个默认的 Snackbar 组件，作为后续添加过渡效果的基础。下面的代码实现了一个点击按钮弹出提示，3秒后自动关闭的基础 Snackbar：

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

const BasicSnackbar = () => {
  const [open, setOpen] = useState(false);

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

  // 关闭 Snackbar 的方法
  const handleClose = (event, reason) => {
    // 避免点击外部自动关闭
    if (reason === 'clickaway') {
      return;
    }
    setOpen(false);
  };

  return (
    <div style={{ padding: '20px' }}>
      <Button variant="contained" onClick={handleOpen}>
        打开基础 Snackbar
      </Button>
      <Snackbar
        open={open}
        autoHideDuration={3000}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
      >
        <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
          这是一条基础提示信息
        </Alert>
      </Snackbar>
    </div>
  );
};

export default BasicSnackbar;

为 Snackbar 添加自定义过渡效果

MUI 的 Snackbar 组件支持通过 TransitionComponent 属性自定义过渡组件，我们可以结合 MUI 提供的过渡组件（如 Slide、Fade、Grow 等）或者自定义 CSS 过渡来实现效果。下面以 Slide 滑动过渡为例，实现从顶部滑入、顶部滑出的效果。

使用 MUI 内置 Slide 过渡

Slide 过渡组件支持指定滑动方向，我们可以将 Snackbar 的过渡设置为从顶部滑入，关闭时从顶部滑出，代码如下：

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

// 定义 Slide 过渡组件，指定方向为从上往下
function SlideTransition(props) {
  return <Slide {...props} direction="down" />;
}

const SlideSnackbar = () => {
  const [open, setOpen] = useState(false);

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

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

  return (
    <div style={{ padding: '20px' }}>
      <Button variant="contained" onClick={handleOpen}>
        打开带滑动效果的 Snackbar
      </Button>
      <Snackbar
        open={open}
        autoHideDuration={3000}
        onClose={handleClose}
        TransitionComponent={SlideTransition}
        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
      >
        <Alert onClose={handleClose} severity="info" sx={{ width: '100%' }}>
          这是一条带滑动过渡的提示信息
        </Alert>
      </Snackbar>
    </div>
  );
};

export default SlideSnackbar;

自定义 CSS 过渡效果

如果需要更个性化的过渡效果，也可以通过 CSS 自定义过渡动画，然后将其封装为过渡组件传递给 Snackbar。下面的例子实现了一个缩放加淡入淡出的组合过渡效果：

import React, { useState } from 'react';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert';
import { Transition } from '@mui/material/transitions';
import { styled } from '@mui/material/styles';

// 定义自定义过渡样式
const CustomTransition = styled(Transition)(() => ({
  '&.MuiTransition-enter': {
    opacity: 0,
    transform: 'scale(0.8)',
  },
  '&.MuiTransition-enterActive': {
    opacity: 1,
    transform: 'scale(1)',
    transition: 'opacity 300ms ease-in, transform 300ms ease-in',
  },
  '&.MuiTransition-exit': {
    opacity: 1,
    transform: 'scale(1)',
  },
  '&.MuiTransition-exitActive': {
    opacity: 0,
    transform: 'scale(0.8)',
    transition: 'opacity 300ms ease-out, transform 300ms ease-out',
  },
}));

const CustomTransitionSnackbar = () => {
  const [open, setOpen] = useState(false);

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

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

  return (
    <div style={{ padding: '20px' }}>
      <Button variant="contained" onClick={handleOpen}>
        打开自定义过渡 Snackbar
      </Button>
      <Snackbar
        open={open}
        autoHideDuration={3000}
        onClose={handleClose}
        TransitionComponent={CustomTransition}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <Alert onClose={handleClose} severity="warning" sx={{ width: '100%' }}>
          这是一条自定义过渡效果的提示
        </Alert>
      </Snackbar>
    </div>
  );
};

export default CustomTransitionSnackbar;

过渡效果适配不同场景

我们可以根据不同的使用场景选择不同的过渡效果：

• 消息提示类 Snackbar 适合用 Fade 淡入淡出或者 Slide 滑动效果，不会过于突兀
• 错误提示类 Snackbar 可以用 Grow 放大进入或者自定义缩放效果，更醒目
• 需要强调的重要提示可以选择从中心弹出的过渡，吸引用户注意力

注意事项

在自定义过渡组件时，需要注意以下几点：

• 过渡组件的 props 需要正确传递给根元素，确保 Snackbar 能控制过渡的状态
• 过渡时长建议控制在 200ms 到 500ms 之间，过长会影响用户体验，过短则过渡效果不明显
• 如果同时使用了多个 Snackbar，建议统一过渡风格，保持界面一致性
• 测试不同浏览器的过渡兼容性，避免出现动画异常的情况

ReactMUI_Snackbar过渡动画Slide组件自定义CSS 本作品最后修改时间：2026-05-22 16:13:09