材质UI的Snackbar不会向下滑动 [英] Material UI's Snackbar is not sliding down

问题描述

我第一次使用 Material-UI ，并在API发布成功后尝试实现 Snackbar .我希望Snackbar向上滑动onEnter，然后向下滑动onExit.我能够实现onEnter上的滑动，但需要"Slide down onExit"方面的帮助.谁能帮我吗?

I am using Material-UI for the first time and trying to implement Snackbar on success of an API post. I want the Snackbar to slide up onEnter and then slide down onExit. I was able to implement slide up onEnter but need help for "Slide down onExit". Can anyone help me?

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 过渡.在更改过渡"部分的此处中，注意给出的示例将 Slide 过渡组件呈现为:

You'll need to set TransitionComponent to a function that takes TransitionProps as its parameter and returns the Slide transition with those props spread onto it. From the Material UI docs here in the "Change Transition" section, notice that the examples given render the Slide transition component as such:

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

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

That's because the TransitionComponent prop of Snackbar takes in a callback of the same signature and applies the slide up animation to the snackbar this way.

您的代码段应如下所示:

Your code snippet should thus look something like this:

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 放在道具中，小吃栏就可以为onEnter动画，而不是onExit动画.希望对您或其他有类似问题的人有帮助.

I too have found through my own experimentation that simply putting <Slide /> or Slide in the prop allows the snackbar to animate onEnter, but not onExit. I hope this helps you or others who may have a similar problem.

这篇关于材质UI的Snackbar不会向下滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！