@wix/design-system/dist/docs/components/TransitionProps.md

@wix/design-system

### animateOnLoad
- type: boolean
- description: Shows enter animation on component mount.
### dataHook
- type: string
- description: Applies a data-hook HTML attribute to be used in the tests.
### children
- type: ReactNode
- description: Allows to render any component as a child item.
### enterAnimation
- type: EnterAnimation
- description: Sets a type of animation that happens on enter animation.
- fadeIn -
   ```javascript
    {
      delay?: 'short' | 'medium' | 'long';
      duration:
        | 'fast01'
        | 'fast02'
        | 'medium01'
        | 'medium02'
        | 'slow01'
        | 'slow02';
      easing?: 'enterEasing' | 'standardEasing';
    }
    ```
- moveIn -
    ```javascript
    {
      delay?: 'short' | 'medium' | 'long';
      direction:
        | 'topToBottom'
        | 'bottomToTop'
        | 'leftToRight'
        | 'rightToLeft';
      distance: string;
      duration:
        | 'fast01'
        | 'fast02'
        | 'medium01'
        | 'medium02'
        | 'slow01'
        | 'slow02';
      easing?: 'enterEasing' | 'standardEasing';
    }
    ```
- expand -
    ```javascript
    {
      delay?: 'short' | 'medium' | 'long';
      direction:
        | 'topToBottom'
        | 'bottomToTop'
        | 'leftToRight'
        | 'rightToLeft';
      duration:
        | 'fast01'
        | 'fast02'
        | 'medium01'
        | 'medium02'
        | 'slow01'
        | 'slow02';
      easing?: 'enterEasing' | 'standardEasing';
    }
    ```
- scaleUp -
    ```javascript
    {
      delay?: 'short' | 'medium' | 'long';
      direction:
        | 'center'
        | 'top'
        | 'topEnd'
        | 'right'
        | 'bottomEnd'
        | 'bottom'
        | 'bottomStart'
        | 'left'
        | 'topStart';
      duration:
        | 'fast01'
        | 'fast02'
        | 'medium01'
        | 'medium02'
        | 'slow01'
        | 'slow02';
      easing?: 'enterEasing' | 'standardEasing';
      scale: string;
    }
    ```
- swoosh - a preset that quickly fades the content in while it drifts and stretches in from one edge. Pairs with layout components like SidePanel. The motion is skipped when the user prefers reduced motion.
    ```javascript
    {
      delay?: 'short' | 'medium' | 'long';
      direction?:
        | 'topToBottom'
        | 'bottomToTop'
        | 'leftToRight'
        | 'rightToLeft';
    }
    ```
### exitAnimation
- type: ExitAnimation
- description: Sets a type of animation that happens on exit animation.
- fadeOut -
    ```javascript
   {
      delay?: 'short' | 'medium' | 'long';
      duration:
        | 'fast01'
        | 'fast02'
        | 'medium01'
        | 'medium02'
        | 'slow01'
        | 'slow02';
      easing?: 'exitEasing' | 'standardEasing';
    }
    ```
- moveOut -
    ```javascript
    {
      delay?: 'short' | 'medium' | 'long';
      direction:
        | 'topToBottom'
        | 'bottomToTop'
        | 'leftToRight'
        | 'rightToLeft';
      distance: string;
      duration:
        | 'fast01'
        | 'fast02'
        | 'medium01'
        | 'medium02'
        | 'slow01'
        | 'slow02';
      easing?: 'exitEasing' | 'standardEasing'
    }
    ```
- collapse -
    ```javascript
    {
      delay?: 'short' | 'medium' | 'long';
      direction:
        | 'topToBottom'
        | 'bottomToTop'
        | 'leftToRight'
        | 'rightToLeft';
      duration:
        | 'fast01'
        | 'fast02'
        | 'medium01'
        | 'medium02'
        | 'slow01'
        | 'slow02';
      easing?: 'exitEasing' | 'standardEasing';
    }
    ```
- scaleDown -
    ```javascript
    {
      delay?: 'short' | 'medium' | 'long';
      direction:
        | 'center'
        | 'top'
        | 'topEnd'
        | 'right'
        | 'bottomEnd'
        | 'bottom'
        | 'bottomStart'
        | 'left'
        | 'topStart';
      duration:
        | 'fast01'
        | 'fast02'
        | 'medium01'
        | 'medium02'
        | 'slow01'
        | 'slow02';
      easing?: 'exitEasing' | 'standardEasing';
      scale: string;
    }
    ```
- swoosh - a preset that quickly fades the content out while it drifts and squashes back toward one edge. Pass the same direction as the enter preset so the content retreats the way it came in. The motion is skipped when the user prefers reduced motion.
    ```javascript
    {
      delay?: 'short' | 'medium' | 'long';
      direction?:
        | 'topToBottom'
        | 'bottomToTop'
        | 'leftToRight'
        | 'rightToLeft';
    }
    ```
### mountOnEnter
- type: boolean
- description: Lazy-mounts the component. If false, will be mounted immediately. It true, will be mounted with first enter.
### onStart
- type: (animationTiming?: AnimationTiming | undefined) => void
- description: Defines a callback function which is called immediately after the animation starts. animationTiming notes if the animation is enter or exit.
### onEnd
- type: (animationTiming?: AnimationTiming | undefined) => void
- description: Defines a callback function which is called immediately after the animation ends. animationTiming notes if the animation is enter or exit.
### show
- type: boolean
- description: Shows animation when set to true.
### unmountOnExit
- type: boolean
- description: Unmounts the component after it finishes exiting. If false, will stay mounted after exit.
### className
- type: string
- description: Specifies a CSS class name to be appended to the component’s root element.
- internal