Material UI 的 Snackbar 没有向下滑动答案

【问题标题】：Material UI's Snackbar is not sliding downMaterial UI 的 Snackbar 没有向下滑动
【发布时间】：2020-04-13 21:04:51
【问题描述】：

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

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"
      />
    );
};

【问题讨论】：

标签： material-ui snackbar

【解决方案1】：

您需要将TransitionComponent 设置为一个以TransitionProps 为参数的函数，并返回Slide 过渡，这些道具散布在上面。在“更改过渡”部分的 Material UI 文档 here 中，请注意给出的示例呈现 Slide 过渡组件：

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

那是因为Snackbar 的TransitionComponent 属性接受了相同签名的回调，并以这种方式将上滑动画应用到snackbar。

因此，您的代码 sn-p 应如下所示：

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 /> 或Slide 放在道具中，就可以让snackbar 为onEnter 设置动画，但不是onExit。我希望这对您或其他可能遇到类似问题的人有所帮助。

【讨论】：