web-dev-qa-db-ja.com

Angular 2 Animation-boolean trigger？

ブールプロパティにバインドされた遷移をトリガーしようとしていますが、これは起動しないようです。

ここに私のアニメーショントリガーのカットダウンバージョンがあります

trigger(
  'trueFalseAnimation', [
    transition('* => true', [
      style({backgroundColor: '#00f7ad'}),
      animate('2500ms', style({backgroundColor: '#fff'}))
    ]),
    transition('* => false', [
      style({backgroundColor: '#ff0000'}),
      animate('2500ms', style({backgroundColor: '#fff'}))
    ])
  ]
)

HTML：

<div [@trueFalseAnimation]="model.someProperty">Content here</div>

テストする：

ngOnInit() {

    setTimeout(() => {
        this.model.someProperty = true;
        setTimeOut(() => {
            this.model.someProperty = false;
        }, 5000);    
    }, 1000)
}

somePropertyが変更されると、トリガーは発生しません。

簡単なテストとして、文字列を使用するようにトリガーを変更しました。

trigger(
      'trueFalseAnimation', [
        transition('* => Success', [
          style({backgroundColor: '#00f7ad'}),
          animate('2500ms', style({backgroundColor: '#fff'}))
        ]),
        transition('* => Failed', [
          style({backgroundColor: '#ff0000'}),
          animate('2500ms', style({backgroundColor: '#fff'}))
        ])
      ]
    )

テストする：

ngOnInit() {

    setTimeout(() => {
        this.model.someProperty = "Success";
        setTimeOut(() => {
            this.model.someProperty = "Failed";
        }, 5000);    
    }, 1000)
}

2番目の例は問題なく動作します

私の質問は

  1. ブール値はトリガーとしてサポートされていますか？
  2. ＃1に「はい」の場合、何が間違っていますか？
angulartypescriptangular2-animation
23
Steven Yates
  1. そうではないようです。これについては既に問題（ 12337 ）が提起されていることがわかりましたが、これまでのところ更新はありません。
  2. もう1つの選択肢は、trueとfalseの代わりに1と0を使用することです。

ここ から plunker を参照してください。

trigger('isVisibleChanged', [
      state('true' , style({ opacity: 1, transform: 'scale(1.0)' })),
      state('false', style({ opacity: 0, transform: 'scale(0.0)'  })),
      transition('1 => 0', animate('300ms')),
      transition('0 => 1', animate('900ms'))
])
26
ScottL

私は同じ問題を抱えています。ブール値がトリガーとしてサポートされているかどうかはわかりませんが、回避策は、ブール値を文字列として返すゲッターで文字列プロパティを定義することでした。このようなもの：

get somePropertyStr():string {
    return this.someProperty.toString();
}

次に、アニメーションをそのsomePropertyStrプロパティにバインドする必要があります。

繰り返しになりますが、これはworkい回避策であり、最善の方法はブール値を使用できることです。

3
OvSleep

状態は文字列であると定義されているため、それに固執する必要があります。

あなたのコードに基づいた最も簡単な-しかし最も厄介な方法はこれです

<div [@trueFalseAnimation]="model.someProperty?.toString()">Content here</div>

しかし、これはかなりひどいので、これはおそらくより良いです

<div [@trueFalseAnimation]="model.someProperty ? 'active' : 'inactive'">Content here</div>
<div [@trueFalseAnimation]="model.someProperty ? 'visible' : 'hidden'">Content here</div>
<div [@trueFalseAnimation]="model.someProperty ? 'up' : 'down'">Content here</div>
<div [@trueFalseAnimation]="model.someProperty ? 'left' : 'right'">Content here</div>

ここでの最善のアドバイスは、実際の意味に対応する状態を使用することです。とにかく、この文脈で真と偽はどういう意味ですか？

ブール値を変換するパイプを作成することを検討しましたが、その唯一の利点は、状態文字列と一貫性があることを確認することです。

1
Simon_Weaver