angular-cn/aio/content/guide/reusable-animations.md

Reusable animations

This topic provides some examples of how to create reusable animations.

Prerequisites

Before continuing with this topic, you should be familiar with the following:

• Introduction to Angular animations
• Transition and triggers

Creating reusable animations

To create a reusable animation, use the animation() method to define an animation in a separate .ts file and declare this animation definition as a const export variable. You can then import and reuse this animation in any of your application components using the useAnimation() API.

In the above code snippet, transAnimation is made reusable by declaring it as an export variable.

Note: The height, opacity, backgroundColor, and time inputs are replaced during runtime.

You can also export a part of an animation. For example, the following snippet exports the animation trigger.

From this point, you can import resuable animation variables in your component class. For example, the following code snippet imports the transAnimation variable for use in the useAnimation() method.

More on Angular animations

You may also be interested in the following:

• Introduction to Angular animations
• Transition and triggers
• Complex animation Sequences
• Route transition animations