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

Answer 2

我意识到，如果您将转换内容包装在div或其他元素中以使其成为容器，那么它将起作用。

<Slide in={isValid} timeout={timeout} direction="left">        
    <div> // adding this div will make it work                       
        <Fade in={isValid} timeout={timeout}>
            <Foo />
        </Fade>
    </div>
</Slide>

然后您可以创建自己的Fade组件，该组件包装div。

const MyFade = React.forwardRef(
  ({ children, in: In, timeout, ...otherProps }, ref) => {
    return (
      <div ref={ref} {...otherProps}>
        <Fade in={In} timeout={timeout}>
          {children}
        </Fade>
      </div>
    );
  }
);

感谢@Ryan Cogswe对此也有所帮助。

我如何在材质ui中使用两个过渡？

2 个答案: