animate

animateはアニメーションの設定を行うための関数です。

第1引数には数値でアニメーションの速度か、’1s 100ms ease-out’のように文字列でCSSのtransitionと同じアニメーション設定ができます。

設定は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";
  }
}

第2引数にはアニメーションの設定を行うことができます。通常はtrigger()内に設定したstate()に向けてアニメーションを行いますが、第2引数にはアニメーションの設定がおこなわれている場合は、そちらのスタイルにむけてアニメーションが行なわれてアニメーション終了後にtrigger()内に設定したstate()に変化します。

transition('inactive => active',
  animate('1000ms ease-in', style({
     background: 'blue'
  }))
)

参考URL

animate function - Angular

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

Angularリファレンス

animate

参考URL

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

検索

スポンサードリンク

バージョン

リファレンス