Angular 4 Dynamic Heightアニメーションがアニメーション後に復帰する

Question

私はAngular4とそのアニメーションを扱っています。 私は動的値をアニメーション宣言に渡そうとしていますが、アニメーションが終了した後は元の状態に戻ります。

基本的に、私はその高さに基づいてアニメーションをトリガする動的な高さを持っています。

私はブートストラップなしでこの作品を作っています。あるいは、css3をフラットアウトして角のアニメーションでやります。

以下はアニメーションの定義を更新

export const deltaScore = trigger(
    "deltaScore", 
    [ 
    state("void", style({ 
      height: "*" 
     } 
    ) 
    ), 
    state('*', style({ height: "*" })), 
    state('update', style({ height: "{{height}}" })), 
    transition(
     "* => *", 
     [style({height: "*"}), animate('1s ease-in')] 
    ), 
    transition(
     "* <=> update", 
     [style({height: "*"}), animate('1s ease-in')] 
    ) 
    ], { height: 0 } 
); 

です：代わりにトリガを使用してのplunk

Answer 1

と述べて、あなたは物事を単純化しAnimationBuilderを、使用することができ、私はそれが最高のこのような状況のために取り付けられていると思います、あなたが州とトリガーを必要としないとき。アニメーションの最終結果は、もちろん、別のアニメーションを行うまで保持されます。

テンプレート：

<div class="progress-wrap"> 
    {{progress}} 
    <div #progressBar class="progress-bar"></div> 
</div> 

コンポーネント：

import { ElementRef } from '@angular/core'; 
import { AnimationBuilder, animate, style } from '@angular/animations'; 

@Component({ 
    // ... 
}) 
export class MyComponent { 

    @ViewChild('progressBar') progressBar: ElementRef; 
    animationPlayer; 

    constructor(
     private animBuilder: AnimationBuilder 
    ) {} 


    updateProgress(progress = null): void { 
     const progressAnimation = this.animBuilder.build([ 
      animate(`430ms ease-out`, style({ 
       'height': `${!!progress ? progress + '%' : '*'}` 
      })) 
     ]); 
     this.animationPlayer = progressAnimation.create(this.progressBar.nativeElement); 
     this.animationPlayer.onDone((evt) => { 
      console.log('ANIMATION DONE', evt); 
      // there is no notion of 'trigger' or 'state' here, 
      // so the only thing this event gives you is the 'phaseName', 
      // which you already know... 
      // But the done callback is here and you can do whatever you might need to do 
      // for when the animation ends 
     }); 
     this.animationPlayer.play(); 
    } 

} 

その後

、あなたは、単にすることができます：私はplnkrにいくつかの調整を行った

this.updateProgress(80); // to animate the progress bar to 80% 
this.updateProgress(); // in case you want to animate to an 'auto' height (not that it would be needed on a progress animation, but for other cases) 

を使用しますtのアニメーションビルダー彼は進歩し、成長のために：https://plnkr.co/edit/K1r3I8QZOmMIAGEYC2fw?p=preview

もちろん、あなたのクラスのプロパティとして 'animationPlayer'を持つ必要はありません...それは単にあなたのメソッドのローカル変数かもしれませんが、別のメソッド内から同じインスタンスにアクセスしたり、一時停止したり、手動で終了したりすることができます。

P.S. state()は間違いなく入力パラメータを受け入れることができます（その機能要求はhereです）。しかし、私はトリガーは、いくつかのトランジションしか持たない状況に適していると思います。高さのアニメーションをトリガする必要があるときはいつでも、トリガ値をランダム化したくないでしょう。あなたのケースでは、AnimationBuilderが優れた選択肢です。