style

styleはアニメーションのスタイル設定を行うための関数です。

引数にはCSSの内容をオブジェクト記法で定義します。

設定したCSSはComponentのanimationsに対して設定したtriggerのstateの第2引数に指定ができます。

値に*を指定すると要素がもつ初期値の値が適用されます。

以下のサンプルでは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";
  }
}

また、animate()内で第2引数に指定を行うとアニメーション前にスタイルが適用されてからアニメーションが開始されます。

animate('100ms ease-in',style({
    width: '300px',
    height: '300px'
})

参考URL

style function - Angular

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

Angularリファレンス

style

参考URL

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

検索

スポンサードリンク

バージョン

リファレンス