我还发现angular.io动画文档是不完整的。我使用了示例代码并做了一些小改动，使其可以使用TOH app tutorial中的代码。
TL; DR
一个state="inactive"属性添加到hero.ts英雄类跟踪每个主人公的动画状态。
在HTML，改变他们的(click)="hero.toggleState()"方法结合(click)="toggleState(hero)"和编写方法在HeroesComponent类：
toggleState(hero: Hero) { hero.state = (hero.state === 'active' ? 'inactive' : 'active'); }
重新布线onSelect()方法，以便gotoDetail()导航作品。
Working plunk that follows steps below
Here is the plunker they provide with everything complete through section 5 - routing.使用它跟着一起，如果你愿意的话。
我将介绍如何修改该plunk以在其动画文档中实现第一个动画。
它们部分步行通过在动画文档的第一个代码是动画活动/非活动状态添加到选定的英雄的英雄视图（相对于仪表板视图）：
import { Component, Input, trigger, state, animate } from '@angular/core';
import { Heroes } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list-basic',
template: `
<ul>
<li *ngFor="let hero of heroes"
[@heroState]="hero.state"
(click)="hero.toggleState()">
{{hero.name}}
</li>
</ul>
`,
styleUrls: ['hero-list.component.css'],
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])
]
})
export class HeroListBasicComponent {
@Input() heroes: Heroes;
}
以上，其（动画示例）代码与app/heroes.component.ts（来自plnkr）中的代码相似，并注意到已将html/css解压到单独的文件中。我认为大部分阅读过的人都遵循了教程，并且熟悉了这段代码。
heroes.component.html 新的动画将基本复制在每个英雄<li>现有的绑定，所以删除这两条线 - 因为如果我们让他们，他们会冲突 - 我们要带来的是功能回到动画状态。从动画例如
<ul class="heroes">
<li *ngFor="let hero of heroes">
--------->[class.selected]="hero === selectedHero"
--------->(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
新的HTML：
<ul class="heroes">
<li *ngFor="let hero of heroes"
[@heroState]="hero.state"
(click)="hero.toggleState()">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
我不想给toggleState方法添加到英雄职业，我希望它在调用它的分量。所以我改变了点击结合
(click)="toggleState(hero)"
，只需点击的英雄传递给我们仍然需要编写的方法。
一个hero没有财产state但让我们补充一点，在应用程序/ hero.ts：
添加state:string = "inactive";到属性列表。
现在让我们回到heroes.component.ts，导入我们动画的依赖，加上在@Component动画的元数据，并创建toggleState()方法。我们希望保留我们从html中删除的onSelect()方法，我们将稍后修改并重用它。
向上顶，更换
import { Component, OnInit } from '@angular/core';
与
import { Component, OnInit, trigger, state, style, transition, animate } from '@angular/core';
追加animations元后styleUrls: [ ... ],：
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])
]
在HeroesComp onent类添加以下方法：
toggleState(hero: Hero) {
hero.state = (hero.state === 'active' ? 'inactive' : 'active');
}
这样所有的作品。现在让我们来破解英雄的细节。英雄详细信息在列表后显示了一个简略的英文单词，该英文单词显示选择了哪个英雄，并伴随着一个导航到detail /：id路由的按钮。但现在它消失了。我们分离的onSelect()方法正在启动该方法。
让我们重命名onSelect()到updateSelectedHero()，然后从里面toggleState()称之为：
updateSelectedHero(hero: Hero): void {
this.selectedHero = hero;
}
toggleState(hero: Hero) {
hero.state = (hero.state === 'active' ? 'inactive' : 'active');
this.updateSelectedHero(hero);
}
AAAND我们回到业务。英雄细节显示出来，它的查看细节按钮调用gotoDetail（）。有些讨厌的UI缺陷需要解决，但你明白了。
My finished plunk