Fade
Note
- Transition components may not work in Yard it only show the props you can use with it. Feel free to playaround with this component in live editor.
Examples
Basic usage
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem consequuntur libero laborum voluptatum deleniti aut perspiciatis illum velit. Placeat magnam quae odio ab in at, aut deserunt minima sed cupiditate.
API
Fade props
| Name | Type | Default | Description |
|---|---|---|---|
children | react node | Children for collapseing | |
containerRef | ref | A ref to access an container element. | |
disableEnterTransition | boolean | false | Flag to allow the entering transition |
disableExitTransition | boolean | false | Flag to allow the exiting transition |
duration | number | 400 | Object with 2 keys enter and exit needed for the timing function |
enableAppearTransition | boolean | false | Flag to allow the component mount transition for the first time |
mountOnEnter | boolean | false | Flag to decide that the component should mount on th first tranition |
onEnter | function | Function called just before starting the animation. | |
onEntered | function | Function called after animation. | |
onEntering | function | Function called just at the starting animation. | |
onExit | function | Function called just before the Exit animation | |
onExited | function | Function called after the Exited animation | |
onExiting | function | Function called at the Exiting animation. | |
overrides | custom | Lets you customize all aspects of the component. | |
timingFunction | 'ease' | 'linear' | 'ease-in' | 'ease-out' | ease | Describes the timing function |
unmountOnExit | boolean | false | The component should unmount of the exiting transition |
visible | boolean | true | Renders component in checked state. |
You can check the implementation of the component for more details.
Fade exports
You can import this module like so:
import {Fade} from 'spaceweb/transitions/fade'It exports the following components or utility functions:
- Fade