honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: animations - replace iterator with simple code style (#18965) 

Replaces iterator facade over the HeroService because webpack threw up.
Also this was an obscure distraction for readers with no obvious benefits.

PR Close #18965
This commit is contained in:
Ward Bell 2017-08-30 15:23:29 -07:00 committed by Igor Minar
parent 23f2bea353
commit 5751865228
14 changed files with 88 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
aio/content/examples/animations/src/app/app.module.ts
View File

@ -1,5 +1,6 @@
// #docregion animations-module
// #docplaster
import { NgModule } from '@angular/core';
// #docregion animations-module
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// #enddocregion animations-module
@ -15,11 +16,12 @@ import { HeroListAutoComponent } from './hero-list-auto.component';
import { HeroListGroupsComponent } from './hero-list-groups.component';
import { HeroListMultistepComponent } from './hero-list-multistep.component';
import { HeroListTimingsComponent } from './hero-list-timings.component';
// #docregion animations-module
// #docregion animation-module
@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule ],
// #enddocregion animation-module
// ... more stuff ...
// #enddocregion animations-module
declarations: [
HeroTeamBuilderComponent,
HeroListBasicComponent,
@ -34,5 +36,8 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
HeroListGroupsComponent
],
bootstrap: [ HeroTeamBuilderComponent ]
// #docregion animations-module
})
export class AppModule { }
// #enddocregion animations-module

4
aio/content/examples/animations/src/app/hero-list-auto.component.ts
View File

@ -10,7 +10,7 @@ import {
transition
} from '@angular/animations';
import { Heroes } from './hero.service';
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-auto',
@ -43,5 +43,5 @@ import { Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListAutoComponent {
@Input() heroes: Heroes;
@Input() heroes: Hero[];
}

4
aio/content/examples/animations/src/app/hero-list-basic.component.ts
View File

@ -14,7 +14,7 @@ import {
} from '@angular/animations';
// #enddocregion imports
import { Heroes } from './hero.service';
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-basic',
@ -66,5 +66,5 @@ import { Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListBasicComponent {
@Input() heroes: Heroes;
@Input() heroes: Hero[];
}

4
aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts
View File

@ -13,7 +13,7 @@ import {
} from '@angular/animations';
// #enddocregion imports
import { Heroes } from './hero.service';
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-combined-transitions',
@ -55,5 +55,5 @@ import { Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListCombinedTransitionsComponent {
@Input() heroes: Heroes;
@Input() heroes: Hero[];
}

4
aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts
View File

@ -10,7 +10,7 @@ import {
transition
} from '@angular/animations';
import { Heroes } from './hero.service';
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-enter-leave-states',
@ -59,5 +59,5 @@ import { Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListEnterLeaveStatesComponent {
@Input() heroes: Heroes;
@Input() heroes: Hero[];
}

4
aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
View File

@ -10,7 +10,7 @@ import {
transition
} from '@angular/animations';
import { Heroes } from './hero.service';
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-enter-leave',
@ -47,5 +47,5 @@ import { Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListEnterLeaveComponent {
@Input() heroes: Heroes;
@Input() heroes: Hero[];
}

4
aio/content/examples/animations/src/app/hero-list-groups.component.ts
View File

@ -11,7 +11,7 @@ import {
group
} from '@angular/animations';
import { Heroes } from './hero.service';
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-groups',
@ -76,5 +76,5 @@ import { Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListGroupsComponent {
@Input() heroes: Heroes;
@Input() heroes: Hero[];
}

4
aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts
View File

@ -12,7 +12,7 @@ import {
} from '@angular/animations';
// #enddocregion imports
import { Heroes } from './hero.service';
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-inline-styles',
@ -56,5 +56,5 @@ import { Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListInlineStylesComponent {
@Input() heroes: Heroes;
@Input() heroes: Hero[];
}

4
aio/content/examples/animations/src/app/hero-list-multistep.component.ts
View File

@ -12,7 +12,7 @@ import {
AnimationEvent
} from '@angular/animations';
import { Heroes } from './hero.service';
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-multistep',
@ -59,7 +59,7 @@ import { Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListMultistepComponent {
@Input() heroes: Heroes;
@Input() heroes: Hero[];
animationStarted(event: AnimationEvent) {
console.warn('Animation started: ', event);

4
aio/content/examples/animations/src/app/hero-list-timings.component.ts
View File

@ -10,7 +10,7 @@ import {
transition
} from '@angular/animations';
import { Heroes } from './hero.service';
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-timings',
@ -54,5 +54,5 @@ import { Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListTimingsComponent {
@Input() heroes: Heroes;
@Input() heroes: Hero[];
}

4
aio/content/examples/animations/src/app/hero-list-twoway.component.ts
View File

@ -13,7 +13,7 @@ import {
} from '@angular/animations';
// #enddocregion imports
import { Heroes } from './hero.service';
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-twoway',
@ -54,5 +54,5 @@ import { Heroes } from './hero.service';
// #enddocregion animationdef
})
export class HeroListTwowayComponent {
@Input() heroes: Heroes;
@Input() heroes: Hero[];
}

39
aio/content/examples/animations/src/app/hero-team-builder.component.ts
View File

@ -1,40 +1,41 @@
import { Component } from '@angular/core';
import { Heroes } from './hero.service';
import { Hero, HeroService } from './hero.service';
@Component({
selector: 'hero-team-builder',
template: `
<div class="buttons">
<button [disabled]="!heroes.canAdd()" (click)="heroes.addInactive()">Add inactive hero</button>
<button [disabled]="!heroes.canAdd()" (click)="heroes.addActive()">Add active hero</button>
<button [disabled]="!heroes.canRemove()" (click)="heroes.remove()">Remove hero</button>
<button [disabled]="!heroService.canAdd()" (click)="heroService.addInactive()">Add inactive hero</button>
<button [disabled]="!heroService.canAdd()" (click)="heroService.addActive()">Add active hero</button>
<button [disabled]="!heroService.canRemove()" (click)="heroService.remove()">Remove hero</button>
</div>
<div class="columns">
<div class="column">
<h4>Basic State</h4>
<p>Switch between active/inactive on click.</p>
<hero-list-basic [heroes]=heroes></hero-list-basic>
<hero-list-basic [heroes]="heroes"></hero-list-basic>
</div>
<div class="column">
<h4>Styles inline in transitions</h4>
<p>Animated effect on click, no persistend end styles.</p>
<hero-list-inline-styles [heroes]=heroes></hero-list-inline-styles>
<p>Animated effect on click, no persistent end styles.</p>
<hero-list-inline-styles [heroes]="heroes"></hero-list-inline-styles>
</div>
<div class="column">
<h4>Combined transition syntax</h4>
<p>Switch between active/inactive on click. Define just one transition used in both directions.</p>
<hero-list-combined-transitions [heroes]=heroes></hero-list-combined-transitions>
<hero-list-combined-transitions [heroes]="heroes"></hero-list-combined-transitions>
</div>
<div class="column">
<h4>Two-way transition syntax</h4>
<p>Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.</p>
<hero-list-twoway [heroes]=heroes></hero-list-twoway>
<hero-list-twoway [heroes]="heroes"></hero-list-twoway>
</div>
<div class="column">
<h4>Enter & Leave</h4>
<p>Enter and leave animations using the void state.</p>
<hero-list-enter-leave [heroes]=heroes></hero-list-enter-leave>
<hero-list-enter-leave [heroes]="heroes"></hero-list-enter-leave>
</div>
</div>
<div class="columns">
@ -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.
</p>
<hero-list-enter-leave-states [heroes]=heroes></hero-list-enter-leave-states>
<hero-list-enter-leave-states [heroes]="heroes"></hero-list-enter-leave-states>
</div>
<div class="column">
<h4>Auto Style Calc</h4>
<p>Leave animation from the current computed height using the auto-style value *.</p>
<hero-list-auto [heroes]=heroes></hero-list-auto>
<hero-list-auto [heroes]="heroes"></hero-list-auto>
</div>
<div class="column">
<h4>Different Timings</h4>
<p>Enter and leave animations with different easings, ease-in for enter, ease-out for leave.</p>
<hero-list-timings [heroes]=heroes></hero-list-timings>
<hero-list-timings [heroes]="heroes"></hero-list-timings>
</div>
<div class="column">
<h4>Multiple Keyframes</h4>
<p>Enter and leave animations with three keyframes in each, to give the transition some bounce.</p>
<hero-list-multistep [heroes]=heroes></hero-list-multistep>
<hero-list-multistep [heroes]="heroes"></hero-list-multistep>
</div>
<div class="column">
<h4>Parallel Groups</h4>
<p>Enter and leave animations with multiple properties animated in parallel with different timings.</p>
<hero-list-groups [heroes]=heroes></hero-list-groups>
<hero-list-groups [heroes]="heroes"></hero-list-groups>
</div>
</div>
`,
@ -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;
}
}

38
aio/content/examples/animations/src/app/hero.service.ts
View File

@ -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<Hero> {
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;
}
}

26
aio/content/guide/animations.md
View File

@ -28,19 +28,37 @@ The examples in this page are available as a <live-example></live-example>.
</div>
## 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.
<code-example path="animations/src/app/app.module.ts" region="animations-module" title="app.module.ts (animation module import excerpt)" linenums="false"></code-example>
#### 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.
<code-example path="animations/src/app/hero.service.ts" region="hero" title="hero.service.ts (Hero class)" linenums="false"></code-example>
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
<img src="generated/images/guide/animations/animation_basic_click.gif" alt="A simple transition animation" class="right">
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:
<code-example path="animations/src/app/app.module.ts" region="animations-module" title="app.module.ts (@NgModule imports excerpt)" linenums="false"></code-example>
Animations can be defined inside `@Component` metadata.
<code-example path="animations/src/app/hero-list-basic.component.ts" region="imports" title="hero-list-basic.component.ts" linenums="false"></code-example>