Customization

Animations enable you to customize their behavior by configuring the Animation component.

To update the Animation effect, use the transitionName 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:

Copy Code  .{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:

Copy Code  .{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.

Suggested Links

• Basic Configuration
• API Reference of the Animation Component