Angular 4 Dynamic Height Animation Reverts After Animation

江枫思渺然 提交于 2019-12-05 21:07:23

Instead of using triggers and states, you could use the AnimationBuilder, which simplifies things and I think it's best fitted for situations like these, when you don't need state and triggers. And the end result of the animation is kept, of course, until you decide to do another animation.

Template:

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

Component:

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

}

Then, you can simply:

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)

I've made some adjustments to the plnkr to use animation builder for the progress and for the growth: https://plnkr.co/edit/K1r3I8QZOmMIAGEYC2fw?p=preview

Of course, you don't need to have 'animationPlayer' as a property of your class... It can simply be a local variable in your method, but maybe you want to access the same instance from within another method, pause it or end it manually.

P.S. state() should definitely be able to accept input params (and there is a feature request for that here), but I think triggers are meant for situations when you'd only have a couple of transition. You wouldn't want to randomize a trigger value whenever you need to trigger an animation for the height. AnimationBuilder is the better choice for your case.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!