web-dev-qa-db-ja.com

Angular 2-アニメーショントランジションが機能しない

2色OnClickの間の遷移が必要です。今、これは私のコードです：

TypeScript

animations: [
    trigger('menubarState', [
        state('false', style({backgroundColor:'#43a047'})),
        state('true', style({backgroundColor:'#333'})),
        transition('false => true', animate('1s')),
        transition('true => false', animate('1s'))
    ])
]

...

export class MenubarComponent {
  menuActive: boolean = false;
  onMenuClick () {
    if (this.menuActive == false) {
      this.menuActive = true;
    } else {
      this.menuActive = false;
    }
  }
}

[〜＃〜] html [〜＃〜]

<li [@menubarState]="menuActive" (click)="onMenuClick()">
      <a><span class="material-icons icon">apps</span></a>
</li>

これにより、background-colorが変更されます。ただし、変更は移行ではなく瞬時に行われます。

Chromeの最新バージョンを使用しています。

htmlangulartypescriptangular2-animation
7
FlorisdG

これは私を最も長い間噛みました、そしてそれを修正したのは私の状態変数をブール型から文字列型に変更することでした。つまり、trueとfalseを追跡する代わりに、'true'と'false'を追跡します。 Angularのドキュメントによると：

アニメーションの状態は、アプリケーションコードで定義する文字列値です。

MenubarComponentクラスを次のように変更します。

export class MenubarComponent {
  menuActive: string = 'false';
  onMenuClick () {
    if (this.menuActive === 'false') {
      this.menuActive = 'true';
    } else {
      this.menuActive = 'false';
    }
  }
}

ばかげていると思います。ブール値は、バイナリ状態に適したオプションであることは明らかです。

詳細： https://angular.io/guide/animations#states-and-transitions

10
Aaron Krauss

アーロンクラウスが提供した答えを拡張します。真/偽の値の直接解釈に問題があります。ただし、文字列コンテキストを参照したくない場合は、上記のtrueとfalseを数値1（true）と0（false）に置き換えることができます。これは私の問題を修正することが証明され、迷惑な文字列の解釈を必要としませんでした。

trigger('menubarState', [
    state('0', style({backgroundColor:'#43a047'})),
    state('1', style({backgroundColor:'#333'})),
    transition('0 => 1', animate('1s')),
    transition('1 => 0', animate('1s'))
])
3
I. Buchan

Aaron Kraussの答えをさらに拡張します。ブール値を文字列に変換したくないので、ゲッターを定義しました。

public menuActive: boolean = false;

get menuState() {
  return this.menuActive ? 'active' : 'inactive'
}

そして、アニメーション定義で（トランジションは同じなのでマージしました）：

animations: [
  trigger('menubarState', [
    state('inactive', style({backgroundColor:'#43a047'})),
    state('active', style({backgroundColor:'#333'})),
    transition('inactive <=> active', animate('1s'))
  ])
]

そして完全に、テンプレート：

<li [@menubarState]="menuState" (click)="onMenuClick()">
  <a><span class="material-icons icon">apps</span></a>
</li>
1
Hetty de Vries

angular 2.onClickでも機能します。すべてのタイプのルーティングにこのコードを使用してください。個別のルート変更またはonclickに個別のアニメーションを使用できます。

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
export const slideInDownAnimation: AnimationEntryMetadata =
  trigger('routeAnimation', [
    state('*',
      style({
        opacity: 1,
        backgroundColor:'#43a047',
        transform: 'translateX(0)'
      })
    ),
    transition(':enter', [
      style({
        opacity: 0,
        backgroundColor:'#333',
        transform: 'translateX(-100%)'
      }),
      animate('0.2s ease-in')
    ]),
    transition(':leave', [
      animate('0.5s ease-out', style({
        opacity: 0,
        backgroundColor:'red',
        transform: 'translateY(100%)'
      }))
    ])
  ]);

選択に応じて、上記のコードを変更することもできます。

0
Shubham Verma