state
stateはアニメーションの詳細設定を行うための関数です。
第1引数には状態を第2引数にはstyleで定義した状態のCSSを定義します。
設定した状態のCSSはComponentのanimationsに対して設定したtriggerに配列として指定を行います。
状態が変更した際のアニメーションの設定は、同じtrigger内にtransitionとして指定を行います。
以下のサンプルではdivにマウスカーソルをのせた際に色が変化しながら拡大するようなアニメーションが指定されています。
import {Component, trigger, state, style, transition, animate, OnInit} from '@angular/core';
@Component({
selector: "body",
styles: [`
div{
width:100px;
height:100px;
}
`],
template: `
<div class="btn"
[@buttonState]="buttonState"
(mouseover)="onmouseover()"
(mouseout)="onmouseout()">div</div>
`,
animations: [
trigger('buttonState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.2)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])
]
})
export class MainComponent implements OnInit{
buttonState:string;
ngOnInit(){
this.buttonState = "inactive";
}
onmouseover(){
this.buttonState = "active";
}
onmouseout(){
this.buttonState = "inactive";
}
}
状態にvoidと指定するとコンポーネントの初期状態のスタイルを定義することができる。
state('void', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
参考URL
登録日 : 2017年01月28日 最終更新日 : 2017年1月28日