[docs][Transitions] Slide component causes siblings to jump to their new position without animating

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

https://codesandbox.io/s/mystifying-shamir-9l2x7q?file=/Demo.tsx

Video demo:

Screencast from 10-03-2023 03:13:11 PM.webm

Steps:

1. Create a TransitionGroup with several Slide components
2. Add or remove items in that group
3. Observe that the siblings do not nicely animate into position

Current behavior 😯

The components sliding in and out causes the sibling components to "jump" into place.

In the animation above, when the "Coconut" is removed from the list, the "Apple" jumps back to the top of the list.

Expected behavior 🤔

When a component slides in or out, the sibling components should slide into place (regardless of direction!).

In the example animation above, when the "Coconut" is removed from the list, the "Apple" should slowly ease back toward the top of the list (while "Coconut" is sliding away).

Context 🔦

This is a pretty minor issue but the animation can be jarring to our users.

In our application, we are using Slide components that are going left/right (as opposed to the demo going up/down).

Your environment 🌎

  System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
  Binaries:
    Node: 18.17.1 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 9.6.7 - /usr/bin/npm
  Browsers:
    Chrome: 117.0.5938.132
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/icons-material: ^5.14.8 => 5.14.8 
    @mui/material: ^5.14.8 => 5.14.8 
    @types/react: ^18.2.15 => 18.2.21 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.0.2 => 5.2.2