Easy markup for react-transition-group
For when you don't feel like googling that weird pattern react-transition-group
and its variants use every dang time.
Handles one or multiple class/id names, timings, and eases.
; max-height: (0, 30px, 20px)), 150 0.1s, ease ease-out);
yields:
(It does both -exit
and -leave
for the out transitions because they changed the class names in the React 16 version.)
Argument | Default value | Default unit | Required |
---|---|---|---|
Classnames | none | string or list | yes |
Props | none | list | yes |
Transition time | 150ms | ms if unitless, accepts s | no |
Transition ease | ease | an ease type | no |
Intro animation only
Play only the intro animation by setting a property's third argument to null
:
initial, null)));