trigger
triggerはアニメーションの設定を行うための関数です。
第1引数にはアニメーション名を第2引数にはstate()やtransition()で定義したアニメーションを配列で定義します。
設定したアニメーションはComponentのanimationsに対して設定し、アニメーションしたい要素に[@アニメーション名]=”状態モデル”といった形で指定を行います。
以下のサンプルでは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";
}
}
参考URL
登録日 : 2017年01月27日 最終更新日 : 2017年1月28日