web-dev-qa-db-ja.com

Angular 4アニメーションから高さ*

Angular 4.のアニメーションモジュールのバグだと思われるものに戸惑いました。Angular 2.xのアニメーションでは、私は高さ*から固定の高さまでアニメーション化するアニメーションを作成しました。これはAngular 2で完全に機能しました。一方、Angular 4を使用する場合、高さアニメーションが適用されている要素の、アニメーションが完了する前に再トリガーするとバグが発生します。ワイルドカード（*）の高さが問題の原因と思われます。これは、問題を再現できるデモスニペットです。バグは次のようになります。 * -height状態のときに要素をダブルクリックするとトリガーされます。

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

@Component({
  selector: 'app-root',
  template: `
  <h1 [@toggleAnimation]="isEnabled" (click)="isEnabled = isEnabled === 'active' ? 'inactive' : 'active'" style="background: blue">
    {{title}}
  </h1>`,
  animations:
  [
    trigger('toggleAnimation', [
      state('active', style({
        height: '*',
      })),
      state('inactive', style({
        height: '600px',
      })),
      transition('active <=> inactive', animate('500ms ease-in-out'))
    ])
  ]
})
export class AppComponent {
  title = 'app works!';
  isEnabled = 'inactive';
}

ワイルドカード値を使用して高さをアニメーション化する方法に問題がありますか、それともワイルドカードの高さの動作に問題がありますか？

angularanimationwildcardangular-animations
8
Tallang

バグのようです： https://github.com/angular/angular/issues/15507

どうやら!は4.2.0-rc.1の「秘密」の値であり、問​​題を修正しているように見えますが、これは公式にサポートされているか、公式リリースでサポートされる予定ではないようです。

https://plnkr.co/edit/pZamSqPX9Vb4J6JL721u?p=preview4.2.0-rc.1で!を使用して動作していることを示し、config.jsに移動して変更します4.0.0に変更し、!を*に戻し、バグが再び発生するかどうかを確認します。

3
Jens Bodal