transition

transitionはアニメーションの状態や速度などの設定を行うための関数です。

第1引数には’stateA => stateB’や’stateA <= stateB'、'stateA <=> stateB’といった具合にどのような状態変化かを文字列で指定します。’stateA => *’や’＊ => stateB’というように*を指定するとどのような状態へ(から)変更するかに関係ない設定を行うことができます。

第2引数にはanimateでアニメーションの設定を行います。

設定はComponentのanimationsに対して設定したtriggerに指定ができます。

以下のサンプルではdivにマウスカーソルをのせた際に拡大するようなアニメーションが指定されています。

import {Component, trigger, state, style, transition, animate, OnInit} from '@angular/core';
 
@Component({
  selector: "body",
  styles: [`
div{
 width:200px;
 height:200px;
 background: red;
}
  `],
  template: `
  <div class="btn"
          [@buttonState]="buttonState"
          (mouseover)="onmouseover()"
          (mouseout)="onmouseout()">div</div>
  `,
  animations: [
    trigger('buttonState', [
      state('inactive', style({
        width: '*',
        height: '*'
      })),
      state('active',   style({
        width: '300px',
        height: '300px'
      })),
      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";
  }
}

また、’:enter’や’:leave’といったキーワードの指定もできるがそれぞれ、’void => *’ と ‘* => void’のエイリアスです。

transition(":enter", [
  style({ opacity: 0 }),
  animate(500, style({ opacity: 1 }))
])
transition(":leave", [
  animate(500, style({ opacity: 0 }))
])

参考URL

transition function - Angular

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

Angularリファレンス

transition

参考URL

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

検索

スポンサードリンク

バージョン

リファレンス