Angular 4 Dynamic Height Animation Reverts After Animation -

i'm working angular4 , animation. i'm trying pass dynamic values animation declaration revers it's original state after animation finishes.

basically, have dynamic height trigger animation based on height.

i'd make work without bootstrap, or flat out css3 approaches , in angular's animation.

below 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

instead of using triggers , states, use animationbuilder, simplifies things , think it's best fitted situations these, when don't need state , triggers. , end result of animation kept, of course, until decide animation.

template:

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

component:

import { elementref } '@angular/core'; import { animationbuilder, animate, style } '@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 no notion of 'trigger' or 'state' here,             // thing event gives 'phasename',             // know...             // done callback here , can whatever might need             // when animation ends         });         this.animationplayer.play();     }  } 

then, can simply:

this.updateprogress(80); // animate progress bar 80% this.updateprogress(); // in case want animate 'auto' height (not needed on progress animation, other cases) 

i've made adjustments plnkr use animation builder progress , growth: https://plnkr.co/edit/k1r3i8qzommiageyc2fw?p=preview

of course, don't need have 'animationplayer' property of class... can local variable in method, maybe want access same instance within method, pause or end manually.

p.s. state() should able accept input params (and there feature request here), think triggers meant situations when you'd have couple of transition. wouldn't want randomize trigger value whenever need trigger animation height. animationbuilder better choice case.