web-dev-qa-db-ja.com

Angularアニメーション：180°回転画像をクリック

Angular 4？]を使用して画像ボタンで画像を回転させる方法（クリック：0°-> 180°/もう一度クリック：180°-> 0°）

Angularマテリアルも使用します。

これは私のボタンです：

 <!-- Button open left menubar -->
<button md-icon-button class="left-menubar-button"  (click)="start.toggle()">
  <md-icon class="md-custom-theme-gray">label_outline</md-icon>
</button>

このボタンはサイドナビゲーションを開きます、そして私はそれをよりユーザーフレンドリーにするためにアニメーション化したいです

ありがとう

htmlangularangular-animations
6
Naografix

編集されたチェック このstackblitzの作業例

import { ...} from '@angular/core';
import {trigger, state, style, animate, transition} from '@angular/animations';

@Component({
    selector: 'my-app',
    animations: [
          // Each unique animation requires its own trigger. The first argument of the trigger function is the name
          trigger('rotatedState', [
              state('default', style({ transform: 'rotate(0)' })),
              state('rotated', style({ transform: 'rotate(-180deg)' })),
              transition('rotated => default', animate('400ms ease-out')),
              transition('default => rotated', animate('400ms ease-in'))
        ]);
    ])
    ],
...

export class RotateComponent { 

    state: string = 'default';

    rotate() {
        this.state = (this.state === 'default' ? 'rotated' : 'default');
    }

}

そしてテンプレートで：

<button (click)="rotate()">Press me to rotate</button>

そして、タグにバインディングを追加してください：

[@rotatedState]='state'

さらに、次のようにアニメーションモジュールをアプリにインポートしてください。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...,
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  ...
})
23
Lucas