angular - Angular 4 動的高さアニメーションがアニメーション後に元に戻る

Question

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

基本的に、動的な高さがあり、その高さに基づいてアニメーションをトリガーします。

ブートストラップなしでこの作業を行うか、css3 アプローチをフラットにして、angular のアニメーションで実行したいと思います。

以下はアニメーションの定義です

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

更新：プランク