[Transition] Document the grouping feature

[cjoecker]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

It will be nice to have something like the AnimatePresence of Framer Motion for Material-UI transitions.
This component creates a copy of the component after unmount. Then it animates the component unmount, and then it deletes the copy.

Motivation 🔦

When I have a list of components and I remove an item, I want to animate the unmounting process with a Material-UI transition.

If the list is being modified in different parts of the program, to create a timeout for animating, and then removing objects can get messy. Therefore, the approach of AnimatePresence that creates a copy of the component until the transition is done, is a cleaner approach for me.

[oliviertassinari]

@cjoecker From what I understand, this is the purpose of this component: https://reactcommunity.org/react-transition-group/transition-group.

[cjoecker]

@oliviertassinari you are right, thanks!
I just realized I can use the Collapse Material-UI component with the react-transition-group library :)

Somehow the animation is not working with the Collapse component when I mount a new item. It works only for unmounting.
With Zoom component is working for mounting and unmounting.
Is it a Bug in the Collapse component?

You can check here the codesandbox.

[oliviertassinari]

@cjoecker Yeap, my version:

https://codesandbox.io/s/simplecollapse-material-demo-forked-mp2mv?file=/demo.tsx

import * as React from "react";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import { TransitionGroup } from "react-transition-group";
import Paper from "@material-ui/core/Paper";
import Box from "@material-ui/core/Box";
import Collapse from "@material-ui/core/Collapse";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      height: 300
    },
    container: {
      display: "flex",
      justifyContent: "space-around",
      height: 120,
      width: 250
    },
    halfWidth: {
      width: "50%"
    },
    paper: {
      margin: theme.spacing(1)
    },
    svg: {
      width: 100,
      height: 100
    },
    polygon: {
      fill: theme.palette.common.white,
      stroke: theme.palette.divider,
      strokeWidth: 1
    }
  })
);

export default function SimpleCollapse() {
  const classes = useStyles();
  const [item, setItem] = React.useState(0);

  console.log("item", item);

  React.useEffect(() => {
    const internval = setInterval(() => {
      setItem((item) => (item + 1) % 2);
    }, 2000);

    return () => {
      clearInterval(internval);
    };
  }, []);

  return (
    <div className={classes.root}>
      <div className={classes.container}>
        <TransitionGroup>
          <Collapse key={item} in>
            <Paper elevation={4} className={classes.paper}>
              <Box sx={{ p: 2 }}>{item}</Box>
            </Paper>
          </Collapse>
        </TransitionGroup>
      </div>
    </div>
  );
}

[oliviertassinari]

@cjoecker Do you want to update the documentation to mention the grouping feature?

[cjoecker]

@oliviertassinari Sure, I can do it :)