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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:
animations/

In this article

Not finding the help you need?