Material UI 的 Snackbar 不向下滑动

我在用Material-UI第一次并尝试实施SnackbarAPI 发布成功。我希望 Snackbar 在 Enter 时向上滑动，然后在 Exit 时向下滑动。我能够实现在 Enter 时向上滑动，但需要“在退出时向下滑动”的帮助。谁能帮我？

import React, { useState } from "react";
import Snackbar from "@material-ui/core/Snackbar";
import Slide from "@material-ui/core/Slide";

const [openSnackBar, setOpenSnackBar] = useState(false);   

const renderSnackbar = () => {
    return (
      <Snackbar
        id="id-success-snackbar"
        className="success-snackbar"
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        open={openSnackBar}
        autoHideDuration={5000}
        onClose={() => setOpenSnackBar(false)}
        TransitionComponent={Slide}
        message="Test Message"
      />
    );
};

你需要设置TransitionComponent到一个函数TransitionProps作为其参数并返回Slide将这些道具传播到其上进行过渡。来自 Material UI 文档here https://material-ui.com/components/snackbars/#change-transition在“更改转换”部分中，请注意给出的示例呈现了Slide过渡组件如下：

function SlideTransition(props: TransitionProps) {
  return <Slide {...props} direction="up" />;
}

那是因为TransitionComponent的支柱Snackbar接受相同签名的回调，并以这种方式将向上滑动动画应用到小吃栏。

因此，您的代码片段应该如下所示：

import React, { useState } from "react";
import Snackbar from "@material-ui/core/Snackbar";
import Slide from "@material-ui/core/Slide";

const [openSnackBar, setOpenSnackBar] = useState(false);   

const renderSnackbar = () => {
    return (
      <Snackbar
        id="id-success-snackbar"
        className="success-snackbar"
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        open={openSnackBar}
        autoHideDuration={5000}
        onClose={() => setOpenSnackBar(false)}

        /* set this to the function below */
        TransitionComponent={slideTransition}


        message="Test Message"
      />
    );
};

// Function that should be passed to the TransitionComponent prop above
const slideTransition = (props: TransitionProps) => {
  return <Slide {...props} direction="up" />;
};

我也通过自己的实验发现，简单地把<Slide /> or Slide属性中的 允许小吃栏在 Enter 时设置动画，但不能在 Exit 时设置动画。我希望这对您或其他可能遇到类似问题的人有所帮助。