reactjs - 如何在 Material ui 中使用两个过渡？

Question

我想要做的是在同一个组件中使用 Fade 和 Slide 。

<Slide in={isValid} timeout={timeout} direction="left">                                
    <Fade in={isValid} timeout={timeout}>
        <Foo />
    </Fade>
</Slide>

但它不起作用。

当 isValid 为 true 时，它​​会在没有淡入淡出效果的情况下滑动组件，当它为 false 时，组件只是闪烁并消失。

我怎样才能让它工作？我不想使用 makeStyle 。

Answer 1

Slide 和 Fade 组件都改变了 style.transition 属性，所以如果它们作用于同一个元素，它们就会破坏对方工作的一部分。

让它工作的方法是让他们对 不同的 元素采取行动。在两个转换之间引入 div 可以获得所需的行为。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Switch from "@material-ui/core/Switch";
import Paper from "@material-ui/core/Paper";
import Fade from "@material-ui/core/Fade";
import Slide from "@material-ui/core/Slide";
import FormControlLabel from "@material-ui/core/FormControlLabel";

const useStyles = makeStyles(theme => ({
  root: {
    height: 180
  },
  container: {
    display: "flex"
  },
  paper: {
    margin: theme.spacing(1),
    backgroundColor: "lightblue"
  },
  svg: {
    width: 100,
    height: 100
  },
  polygon: {
    fill: theme.palette.primary.main,
    stroke: theme.palette.divider,
    strokeWidth: 1
  }
}));

export default function SlideAndFade() {
  const classes = useStyles();
  const [checked, setChecked] = React.useState(false);

  const handleChange = () => {
    setChecked(prev => !prev);
  };

  return (
    <div className={classes.root}>
      <FormControlLabel
        control={<Switch checked={checked} onChange={handleChange} />}
        label="Show"
      />
      <div className={classes.container}>
        <Slide in={checked} timeout={1000}>
          <div>
            <Fade in={checked} timeout={1000}>
              <Paper elevation={4} className={classes.paper}>
                <svg className={classes.svg}>
                  <polygon
                    points="0,100 50,00, 100,100"
                    className={classes.polygon}
                  />
                </svg>
              </Paper>
            </Fade>
          </div>
        </Slide>
      </div>
    </div>
  );
}