Animated effect on click, no persistend end styles.
-
+
Animated effect on click, no persistent end styles.
+
Combined transition syntax
Switch between active/inactive on click. Define just one transition used in both directions.
-
+
Two-way transition syntax
Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.
-
+
Enter & Leave
Enter and leave animations using the void state.
-
+
@@ -44,27 +45,27 @@ import { Heroes } from './hero.service';
Enter and leave animations combined with active/inactive state animations.
Different enter and leave transitions depending on state.
-
+
Auto Style Calc
Leave animation from the current computed height using the auto-style value *.
-
+
Different Timings
Enter and leave animations with different easings, ease-in for enter, ease-out for leave.
-
+
Multiple Keyframes
Enter and leave animations with three keyframes in each, to give the transition some bounce.
-
+
Parallel Groups
Enter and leave animations with multiple properties animated in parallel with different timings.
-
+
`,
@@ -87,8 +88,12 @@ import { Heroes } from './hero.service';
min-height: 6em;
}
`],
- providers: [Heroes]
+ providers: [HeroService]
})
export class HeroTeamBuilderComponent {
- constructor(private heroes: Heroes) { }
+ heroes: Hero[];
+
+ constructor(private heroService: HeroService) {
+ this.heroes = heroService.heroes;
+ }
}
diff --git a/aio/content/examples/animations/src/app/hero.service.ts b/aio/content/examples/animations/src/app/hero.service.ts
index 6bdeb5a512..c0053d0185 100644
--- a/aio/content/examples/animations/src/app/hero.service.ts
+++ b/aio/content/examples/animations/src/app/hero.service.ts
@@ -1,16 +1,16 @@
import { Injectable } from '@angular/core';
-class Hero {
- constructor(public name: string,
- public state = 'inactive') {
- }
+// #docregion hero
+export class Hero {
+ constructor(public name: string, public state = 'inactive') { }
toggleState() {
- this.state = (this.state === 'active' ? 'inactive' : 'active');
+ this.state = this.state === 'active' ? 'inactive' : 'active';
}
}
+// #enddocregion hero
-let ALL_HEROES = [
+const ALL_HEROES = [
'Windstorm',
'RubberMan',
'Bombasto',
@@ -25,36 +25,30 @@ let ALL_HEROES = [
].map(name => new Hero(name));
@Injectable()
-export class Heroes implements Iterable {
+export class HeroService {
- currentHeroes: Hero[] = [];
-
- [Symbol.iterator]() {
- return this.currentHeroes.values();
- }
+ heroes: Hero[] = [];
canAdd() {
- return this.currentHeroes.length < ALL_HEROES.length;
+ return this.heroes.length < ALL_HEROES.length;
}
canRemove() {
- return this.currentHeroes.length > 0;
+ return this.heroes.length > 0;
}
- addActive() {
- let hero = ALL_HEROES[this.currentHeroes.length];
- hero.state = 'active';
- this.currentHeroes.push(hero);
+ addActive(active = true) {
+ let hero = ALL_HEROES[this.heroes.length];
+ hero.state = active ? 'active' : 'inactive';
+ this.heroes.push(hero);
}
addInactive() {
- let hero = ALL_HEROES[this.currentHeroes.length];
- hero.state = 'inactive';
- this.currentHeroes.push(hero);
+ this.addActive(false);
}
remove() {
- this.currentHeroes.splice(this.currentHeroes.length - 1, 1);
+ this.heroes.length -= 1;
}
}
diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md
index 89ecd5f479..96e79948e8 100644
--- a/aio/content/guide/animations.md
+++ b/aio/content/guide/animations.md
@@ -28,19 +28,37 @@ The examples in this page are available as a .
+## Setup
+
+Before you can add animations to your application, you need
+to import a few animation-specific modules and functions to the root application module.
+
+
+
+#### Example basics
+
+The animations examples in this guide animate a list of heroes.
+
+A `Hero` class has a `name` property, a `state` property that indicates if the hero is active or not,
+and a `toggleState()` method to switch between the states.
+
+
+
+Across the top of the screen (`app.hero-team-builder.component.ts`)
+are a series of buttons that add and remove heroes from the list (via the `HeroService`).
+The buttons trigger changes to the list that all of the example components see at the same time.
+
{@a example-transitioning-between-states}
-## Quickstart example: Transitioning between two states
+## Transitioning between two states
You can build a simple animation that transitions an element between two states
driven by a model attribute.
-Animations are defined inside `@Component` metadata. Before you can add animations, you need
-to import a few animation-specific imports and functions:
-
+Animations can be defined inside `@Component` metadata.
You can build a simple animation that transitions an element between two states
driven by a model attribute.
-Animations are defined inside `@Component` metadata. Before you can add animations, you need
-to import a few animation-specific imports and functions:
-