Angular 4 Dynamic Height Animation Reverts After Animation

I'm working with Angular4 and their animation. I'm trying to pass dynamic values to an animation declaration but it revers to it's original state after the animation finishes.

Basically, I have a dynamic height that will then trigger the animation based on that height.

I'd like to make this work without bootstrap, or flat out css3 approaches and do it in angular's animation.

Below is the animation definition

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

Updated: plunk