diff --git a/aio/content/examples/animations/src/app/animations.1.ts b/aio/content/examples/animations/src/app/animations.1.ts index ae7558f53d..507d4d7c89 100644 --- a/aio/content/examples/animations/src/app/animations.1.ts +++ b/aio/content/examples/animations/src/app/animations.1.ts @@ -1,7 +1,9 @@ -// #docregion -import { animation, style, animate } from '@angular/animations'; +// #docplaster +// #docregion animation-const, trigger-const +import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations'; +// #enddocregion trigger-const -export const transAnimation = animation([ +export const transitionAnimation = animation([ style({ height: '{{ height }}', opacity: '{{ opacity }}', @@ -9,3 +11,19 @@ export const transAnimation = animation([ }), animate('{{ time }}') ]); +// #enddocregion animation-const + +// #docregion trigger-const +export const triggerAnimation = trigger('openClose', [ + transition('open => closed', [ + useAnimation(transitionAnimation, { + params: { + height: 0, + opacity: 1, + backgroundColor: 'red', + time: '1s' + } + }) + ]) +]); +// #enddocregion trigger-const diff --git a/aio/content/examples/animations/src/app/animations.ts b/aio/content/examples/animations/src/app/animations.ts index 8b6abd5ec7..040985da9c 100644 --- a/aio/content/examples/animations/src/app/animations.ts +++ b/aio/content/examples/animations/src/app/animations.ts @@ -1,4 +1,3 @@ -// #docregion reusable import { animation, trigger, animateChild, group, transition, animate, style, query @@ -12,7 +11,6 @@ export const transAnimation = animation([ }), animate('{{ time }}') ]); -// #enddocregion reusable // Routable animations // #docregion route-animations diff --git a/aio/content/guide/reusable-animations.md b/aio/content/guide/reusable-animations.md index fe3b44f1ea..1a31f5c78f 100644 --- a/aio/content/guide/reusable-animations.md +++ b/aio/content/guide/reusable-animations.md @@ -1,21 +1,19 @@ # Reusable animations -#### Prerequisites +This topic provides some examples of how to create reusable animations. -A basic understanding of the following concepts: +## Prerequisites + +Before continuing with this topic, you should be familiar with the following: * [Introduction to Angular animations](guide/animations) * [Transition and triggers](guide/transition-and-triggers) -