Customization
Animations enable you to customize their behavior by configuring the Animation
component.
To update the Animation effect, use the transition-name
property. The property defines the class name that is added to the enter or exit elements.
Entering Animations
To configure the entering animation, define the CSS classes by using the following syntax:
.{transitionName}-enter {
/* The class that will be added on initial render of the element */
}
.{transitionName}-enter-active {
/* The class that will be added after one time-frame(~16ms) to initiate the transition */
}
The following example demonstrates how to create a custom entering animation.
Exiting Animations
To configure the exiting animation, define the CSS classes by using the following syntax:
.{transitionName}-exit {
/* The class that will be added on initial render of the element */
}
.{transitionName}-exit-active {
/* The class that will be added after one time-frame(~16ms) to initiate the transition */
}
The following example demonstrates how to customize an exiting Slide Animation.