Lo que intento hacer es usar Fade y Slide en el mismo componente.

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

Pero no funciona.

Cuando isValid es verdadero, desliza el componente sin el efecto de desvanecimiento y cuando es falso, el componente simplemente parpadea y desaparece.

¿Cómo puedo hacer que funcione? No quiero usar makeStyle.

3
Vencovsky 4 dic. 2019 a las 06:16

2 respuestas

Me di cuenta de que si envuelve la transición en un div u otro elemento para hacerlo como contenedor, funcionará.

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

Y luego puede crear su propio componente Fade que envuelve un div.

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

Gracias a @Ryan Cogswe que también ayudó en esto.

0
Vencovsky 6 dic. 2019 a las 20:26

El Diapositiva y el Fade cambian la propiedad style.transition, por lo que si actúan sobre el mismo elemento, bloquean partes del trabajo del otro.

La forma de hacer que esto funcione es que actúen sobre elementos diferentes . Introducir un div entre las dos transiciones obtiene el comportamiento deseado.

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

Edit Material demo

1
Ryan Cogswell 6 dic. 2019 a las 20:34