[docs] Animate component's mounting and unmounting

docs/package.json

@@ -105,6 +105,7 @@
     "react-spring": "^8.0.27",
     "react-swipeable-views": "^0.13.9",
     "react-text-mask": "^5.0.2",
+    "react-transition-group": "^4.4.1",
     "react-virtualized": "^9.21.1",
     "react-window": "^1.8.5",
     "recast": "^0.20.2",

docs/src/pages/components/transitions/TransitionGroupExample.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  Button,
+  Collapse,
+  IconButton,
+  List,
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+} from '@material-ui/core';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { TransitionGroup } from 'react-transition-group';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+    backgroundColor: theme.palette.background.paper,
+  },
+  button: {
+    marginBottom: theme.spacing(2),
+  },
+}));
+
+const FRUITS = ['Apple', 'Banana', 'Mango', 'Papaya', 'Watermelon', 'Coconut'];
+
+export default function TransitionGroupExample() {
+  const classes = useStyles();
+  const [fruitsInBasket, setFruitsInBasket] = React.useState(FRUITS.slice(0, 3));
+
+  const handleAddFruit = () => {
+    const nextHiddenItem = FRUITS.find((i) => !fruitsInBasket.includes(i));
+    if (nextHiddenItem) setFruitsInBasket((prev) => [nextHiddenItem, ...prev]);
+  };
+
+  const handleRemoveFruit = (item) => {
+    setFruitsInBasket((prev) => [...prev.filter((i) => i !== item)]);
+  };
+
+  return (
+    <div>
+      <Button
+        variant="contained"
+        className={classes.button}
+        disabled={fruitsInBasket.length >= FRUITS.length}
+        onClick={handleAddFruit}
+      >
+        Add fruit to basket
+      </Button>
+      <List className={classes.root}>
+        <TransitionGroup>
+          {fruitsInBasket.map((item) => (
+            <Collapse key={item} in>
+              <ListItem>
+                <ListItemText primary={item} />
+                <ListItemSecondaryAction>
+                  <IconButton
+                    edge={'end'}
+                    aria-label="delete"
+                    onClick={() => handleRemoveFruit(item)}
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </ListItemSecondaryAction>
+              </ListItem>
+            </Collapse>
+          ))}
+        </TransitionGroup>
+      </List>
+    </div>
+  );
+}

docs/src/pages/components/transitions/TransitionGroupExample.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import {
+  Button,
+  Collapse,
+  IconButton,
+  List,
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+} from '@material-ui/core';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { TransitionGroup } from 'react-transition-group';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      backgroundColor: theme.palette.background.paper,
+    },
+    button: {
+      marginBottom: theme.spacing(2),
+    },
+  }),
+);
+
+const FRUITS = ['Apple', 'Banana', 'Mango', 'Papaya', 'Watermelon', 'Coconut'];
+
+export default function TransitionGroupExample() {
+  const classes = useStyles();
+  const [fruitsInBasket, setFruitsInBasket] = React.useState(FRUITS.slice(0, 3));
+
+  const handleAddFruit = () => {
+    const nextHiddenItem = FRUITS.find((i) => !fruitsInBasket.includes(i));
+    if (nextHiddenItem) setFruitsInBasket((prev) => [nextHiddenItem, ...prev]);
+  };
+
+  const handleRemoveFruit = (item: string) => {
+    setFruitsInBasket((prev) => [...prev.filter((i) => i !== item)]);
+  };
+
+  return (
+    <div>
+      <Button
+        variant="contained"
+        className={classes.button}
+        disabled={fruitsInBasket.length >= FRUITS.length}
+        onClick={handleAddFruit}
+      >
+        Add fruit to basket
+      </Button>
+      <List className={classes.root}>
+        <TransitionGroup>
+          {fruitsInBasket.map((item) => (
+            <Collapse key={item} in>
+              <ListItem>
+                <ListItemText primary={item} />
+                <ListItemSecondaryAction>
+                  <IconButton
+                    edge={'end'}
+                    aria-label="delete"
+                    onClick={() => handleRemoveFruit(item)}
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </ListItemSecondaryAction>
+              </ListItem>
+            </Collapse>
+          ))}
+        </TransitionGroup>
+      </List>
+    </div>
+  );
+}

docs/src/pages/components/transitions/transitions.md

@@ -81,6 +81,15 @@ This example also demonstrates how to delay the enter transition.
 
 {{"demo": "pages/components/transitions/SimpleZoom.js", "bg": true}}
 
+## Animate component's mounting and unmounting
+
+To animate a component when it is mounted or unmounted, you can use the `TransitionGroup` component from `react-transition-group`.
+As components are added or removed, the `in` prop is toggled automatically by `TransitionGroup`.
+
+More information about the `TransitionGroup` component can be found [here](https://reactcommunity.org/react-transition-group/transition-group).
+
+{{"demo": "pages/components/transitions/TransitionGroupExample.js", "bg": true}}
+
 ## TransitionComponent prop
 
 Some Material-UI components use these transitions internally. These accept a `TransitionComponent` prop to customize the default transition.