2017-04-10 9 views
8

アニメーションモジュールのバグであると思うかもしれません。Angular 2.xのアニメーションでは、高さ*からアニメーションまでのアニメーションを作成しました。固定された高さ。一方、Angular 4を使用する場合、アニメーションが適用されている要素の高さは、アニメーションが完了する前に再トリガーするとバグが発生します。ワイルドカード(*)の高さが問題を引き起こしているようです。この問題を再現できるデモスニペットは次のとおりです。あなたは要素をダブルクリックした場合、それは* -height状態にあるときにバグがトリガすることができます。Angular 4アニメーション〜高さ*

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'; 
} 

は、私は、ワイルドカード値を使用して高さをアニメーション化する方法に何か問題がある、または間違ったInfactは何かがありますワイルドカードの高さはどのように振る舞いますか?

答えて

2

バグのように見える:https://github.com/angular/angular/issues/15507

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

https://plnkr.co/edit/pZamSqPX9Vb4J6JL721u?p=previewは、それが!4.2.0-rc.1で働いて示し、その後、ちょうどconfig.jsに移動して4.0.0に変更し、それが再びバギーだかを確認するために戻って*から!を変更します。

+1

githubの問題を参照していただきありがとうございます。 – Tallang