Angular 4 动态高度动画在动画后还原

Question

我正在使用 Angular4 及其动画。我试图将动态值传递给动画声明，但它在动画结束后恢复到原始状态。

基本上，我有一个动态高度，然后会根据该高度触发动画。

我想在没有 bootstrap 的情况下完成这项工作，或者完全采用 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 }
);

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

}

然后，您可以简单地：

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)

我对 plnkr 进行了一些调整，以使用动画生成器来实现进度和增长：https://plnkr.co/edit/K1r3I8QZOmMIAGEYC2fw?p=preview

当然，您不需要将 'animationPlayer' 作为 class 的属性...它可以只是您方法中的局部变量，但也许你想从另一个方法中访问同一个实例，暂停它或手动结束它。

P.S。 state() 绝对应该能够接受输入参数（并且有一个功能请求 here），但我认为触发器适用于只有几个转换的情况。您不希望在需要触发高度动画时随机化触发值。 AnimationBuilder 是您的更好选择。

Angular 4 动态高度动画在动画后还原

Angular 4 Dynamic Height Animation Reverts After Animation

angular

animation

angular-animations