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

trigger function - Angular

登録日 : 2017年01月27日最終更新日 : 2017年1月28日

Angularリファレンス

trigger

参考URL

同じカテゴリー(@angular/core)のエントリー

検索

スポンサードリンク

バージョン

リファレンス