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

state function - Angular

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

Angularリファレンス

state

参考URL

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

検索

スポンサードリンク

バージョン

リファレンス