标签：一个 程序代码 javascrip let 合并 0ms component selector 通配符
使用动画：
import {
Component,
Input
} from ‘@angular/core‘;
import {
trigger,
state,
style,
animate,
transition
} from ‘@angular/animations‘;
@Component({
selector: ‘app-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: Hero[];
}
状态是一个由程序代码中定义的字符串值, 上面的例子 ‘active‘和‘inactive‘这两种状态
state具体定义了每个状态的最终样式。一旦元素转场到那个状态，该样式就会被应用到此元素上，当它留在此状态时，这些样式也会一直保持着。 从这个意义上讲，这里其实并不只是在定义动画，而是在定义该元素在不同状态时应该具有的样式。
定义完状态，就能定义在状态之间的各种转场了。每个转场都会控制一条在一组样式和下一组样式之间切换的时间线
transition(‘inactive => active‘, animate(‘100ms ease-in‘)),
transition(‘active => inactive‘, animate(‘100ms ease-out‘))
如果多个转场都有同样的时间线配置，就可以把它们合并进同一个transition定义中：
transition(‘inactive => active, active => inactive‘,animate(‘100ms ease-out‘))
如果要对同一个转场的两个方向都使用相同的时间线（就像前面的例子中那样），就可以使用<=>这种简写语法
transition(‘inactive <=> active‘, animate(‘100ms ease-out‘))
希望一些样式只在动画期间生效，但在结束后并不保留它们。这时可以把这些样式内联在transition中进行定义
例子中，该元素会立刻获得一组样式，然后动态转场到下一个状态。当转场结束时，这些样式并不会被保留，因为它们并没有被定义在state中
transition(‘inactive => active‘, [
style({
backgroundColor: ‘#cfd8dc‘,
transform: ‘scale(1.3)‘
}),
animate(‘80ms ease-in‘, style({
backgroundColor: ‘#eee‘,
transform: ‘scale(1)‘
}))
]),
*(通配符)状态*(通配符)状态匹配任何动画状态。当定义那些不需要管当前处于什么状态的样式及转场时，这很有用。比如：
当该元素的状态从active变成任何其它状态时，active => *转场都会生效
当在任意两个状态之间切换时，* => *转场都会生效。
void状态有一种叫做void的特殊状态，它可以应用在任何动画中。它表示元素没有被附加到视图。这种情况可能是由于它尚未被添加进来或者已经被移除了。 void状态在定义“进场”和“离场”的动画时会非常有用.
比如当一个元素离开视图时，* => void 转场就会生效，而不管它在离场以前是什么状态
*通配符状态也能匹配 void
使用void和*状态，可以定义元素进场与离场时的转场动画：
进场：void => *
离场：* => void
例如，在下面的animations数组中，这两个转场语句使用void => *和* => void语法来让该元素以动画形式进入和离开当前视图
animations: [
trigger(‘flyInOut‘, [
state(‘in‘, style({transform: ‘translateX(0)‘})),
transition(‘void => *‘, [
style({transform: ‘translateX(-100%)‘}),
animate(100)
]),
transition(‘* => void‘, [
animate(100, style({transform: ‘translateX(100%)‘}))
])
])
]
这个例子中，这些样式在转场定义中被直接应用到了void状态，但并没有一个单独的state(void)定义。 这么做是因为希望在进场与离场时使用不一样的转换效果：元素从左侧进场，从右侧离开
这两个常见的动画有自己的别名：
These two common animations have their own aliases:
transition(‘:enter‘, [ ... ]); // void => *
transition(‘:leave‘, [ ... ]); // * => void
非激活英雄进场：void => inactive
激活英雄进场：void => active
非激活英雄离场：inactive => void
激活英雄离场：active => void
animations: [
trigger(‘heroState‘, [
state(‘inactive‘, style({transform: ‘translateX(0) scale(1)‘})),
state(‘active‘, style({transform: ‘translateX(0) scale(1.1)‘})),
transition(‘inactive => active‘, animate(‘100ms ease-in‘)),
transition(‘active => inactive‘, animate(‘100ms ease-out‘)),
transition(‘void => inactive‘, [
style({transform: ‘translateX(-100%) scale(1)‘}),
animate(100)
]),
transition(‘inactive => void‘, [
animate(100, style({transform: ‘translateX(100%) scale(1)‘}))
]),
transition(‘void => active‘, [
style({transform: ‘translateX(0) scale(0)‘}),
animate(200)
]),
transition(‘active => void‘, [
animate(200, style({transform: ‘translateX(0) scale(0)‘}))
])
])
]
由于Angular的动画支持是基于Web Animations标准的，所以也能支持浏览器认为可以参与动画的任何属性。这些属性包括位置(position)、大小(size)、变换(transform)、颜色(color)、边框(border)等很多属性。W3C维护着 一个“可动”属性列表。
尺寸类属性(如位置、大小、边框等)包括一个数字值和一个用来定义长度单位的后缀：
‘50px‘‘3em‘‘100%‘对大多数尺寸类属性而言，还能只定义一个数字，那就表示它使用的是像素(px)数：
50相当于‘50px‘
有时候，我们想在动画中使用的尺寸类样式，它的值在开始运行之前都是不可知的。比如，元素的宽度和高度往往依赖于它们的内容和屏幕的尺寸。处理这些属性对CSS动画而言通常是相当棘手的。
如果用Angular动画，就可以用一个特殊的*属性值来处理这种情况。该属性的值将会在运行期被计算出来，然后插入到这个动画中
例子中的“离场”动画会取得该元素在离场前的高度，并且把它从这个高度用动画转场到0高度：
animations: [
trigger(‘shrinkOut‘, [
state(‘in‘, style({height: ‘*‘})),
transition(‘* => void‘, [
style({height: ‘*‘}),
animate(250, style({height: 0}))
])
])
]
标签：一个 程序代码 javascrip let 合并 0ms component selector 通配符
原文地址：http://www.cnblogs.com/vs1435/p/7794387.html
