Question

我第一次使用Material-UI，并尝试在API发布成功后实施Snackbar。我希望Snackbar向上滑动onEnter，然后向下滑动onExit。我能够实现onEnter上的滑动，但需要“ Slide down 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"
      />
    );
};

Answer 1

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

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

这是因为TransitionComponent的{{1}}道具接受具有相同签名的回调，并以这种方式将向上滑动动画应用于小吃店。

您的代码段应如下所示：

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 />放在道具中，即可使快餐栏动画化onEnter，而不是onExit。希望对您或其他有类似问题的人有帮助。

材质UI的Snackbar不会向下滑动

1 个答案: