为React MUI Snackbar添加滑动过渡效果的教程

在React项目中使用MUI（Material UI）的Snackbar组件时，默认的显示隐藏过渡效果可能无法满足个性化需求。本文将介绍如何为MUI Snackbar添加自定义的滑动过渡效果，让提示交互更加流畅自然。

前置准备

首先确保项目中已经安装了MUI相关依赖，如果还未安装，可以执行以下命令：

# 安装MUI核心库和图标库
npm install @mui/material @emotion/react @emotion/styled
# 如果需要使用MUI的过渡组件，还需要安装系统工具库
npm install @mui/system

滑动过渡效果需要用到MUI提供的Slide过渡组件，该组件已经包含在@mui/material中，无需额外安装。

基础Snackbar组件结构

我们先实现一个基础的、不带自定义过渡效果的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}>
        显示提示
      </Button>
      <Snackbar
        open={open}
        autoHideDuration={3000}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      >
        <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
          操作成功完成！
        </Alert>
      </Snackbar>
    </div>
  );
};

export default BasicSnackbar;

上面的代码实现了一个点击按钮后在页面右上角显示成功提示的Snackbar，默认使用MUI内置的淡入淡出过渡效果，接下来我们为其添加滑动过渡。

添加滑动过渡效果

MUI的Snackbar组件提供了TransitionComponent属性，允许我们传入自定义的过渡组件，我们只需要将Slide组件作为该属性的值传入即可，同时可以通过transitionDuration属性自定义过渡时长。

import React, { useState } from 'react';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert';
// 引入Slide过渡组件
import Slide from '@mui/material/Slide';

// 定义Slide过渡的方向，这里选择从右侧滑入
const SlideTransition = (props) => {
  return <Slide {...props} direction="left" />;
};

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}>
        显示滑动提示
      </Button>
      <Snackbar
        open={open}
        autoHideDuration={3000}
        onClose={handleClose}
        // 传入自定义过渡组件
        TransitionComponent={SlideTransition}
        // 设置过渡时长，单位毫秒
        transitionDuration={500}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      >
        <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
          这是带滑动效果的提示！
        </Alert>
      </Snackbar>
    </div>
  );
};

export default SlideSnackbar;

上面的代码中，我们首先定义了SlideTransition函数组件，它接收Slide组件的所有属性，并固定了滑动方向为left（从右侧滑入）。然后将这个组件传给Snackbar的TransitionComponent属性，同时设置过渡时长为500毫秒，这样Snackbar显示和隐藏时就会产生从左到右的滑动效果。

自定义滑动方向

Slide组件的direction属性支持四个值：up、down、left、right，分别对应从下往上、从上往下、从右往左、从左往右的滑动方向。我们可以根据Snackbar的位置调整滑动方向，让过渡效果更自然：

• 如果Snackbar位置是anchorOrigin={{ vertical: 'top', horizontal: 'right' }}，适合使用direction="left"，从右侧滑入
• 如果Snackbar位置是anchorOrigin={{ vertical: 'top', horizontal: 'left' }}，适合使用direction="right"，从左侧滑入
• 如果Snackbar位置是anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}，适合使用direction="up"，从下往上滑入

以下是一个从底部向上滑入的示例：

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';

const BottomSlideSnackbar = () => {
  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}>
        底部滑动提示
      </Button>
      <Snackbar
        open={open}
        autoHideDuration={3000}
        onClose={handleClose}
        // 直接使用Slide组件，设置方向为up
        TransitionComponent={(props) => <Slide {...props} direction="up" />}
        transitionDuration={400}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      >
        <Alert onClose={handleClose} severity="info" sx={{ width: '100%' }}>
          从底部向上滑入的提示
        </Alert>
      </Snackbar>
    </div>
  );
};

export default BottomSlideSnackbar;

注意事项

在使用自定义过渡效果时，需要注意以下几点：

• 过渡时长建议设置在300-600毫秒之间，过短会让用户感知不到过渡效果，过长会影响交互体验
• 如果同时使用多个Snackbar，建议统一过渡方向和时长，保持交互一致性
• 如果需要更复杂的过渡效果，可以使用MUI的Grow、Fade、Zoom等其他过渡组件，用法和Slide类似

ReactMUISnackbar滑动过渡Slide组件 本作品最后修改时间：2026-05-22 16:14:39