Create simple CSS transitions using the provided transition hooks and components utilizing the default transition timing functions. This package also provides a collapse transition, scaling transition, vertical only scaling transition, and a new page transition named cross fade.
Provided components and hooks:
useCollapse- transition an element in and out of view based on the height of the element
useCrossFade- a transition generally used for a full page transition that fades and slightly moves a child component into view
ScaleTransition- transition an element in and out of view with a
scaletransform that can be updated to just be
useTransition- a hook implementation of the
useCSSTransition-a hook implementation of the
useFixedPositioning- hooks into the
react-transition-groupto fix an element to another element within the viewport
rmd-transition-shadow-transition mixin allows you to "performantly"
transition between two box shadow values using the
opacity trick. This
mixin automatically creates a pseudo
::after element with the
final box shadow and animates the opacity once one of the
are triggered. The code below will help explain this part a bit more.
npm install --save @react-md/transition
It is also recommended to install the following packages as they work hand-in-hand with this package:
npm install --save @react-md/theme \@react-md/utils
You should check out the full documentation for live examples and more customization information, but an example usage is shown below.