42289f25c6
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2.1 KiB
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:
Creating reusable animations
To create a reusable animation, use the animation() function 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() function.
In the preceding code snippet, transitionAnimation 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 reusable animation variables in your component class.
For example, the following code snippet imports the transitionAnimation variable and uses it via the useAnimation() function.
More on Angular animations
You might also be interested in the following:
- Introduction to Angular animations
- Transition and triggers
- Complex animation Sequences
- Route transition animations
@reviewed 2022-02-28