@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;
 }
 ```
### 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;
 }
 ```
### 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) => 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) => 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.