4

我正在使用 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 }
);

更新：plunk

4

1 回答 1

4

您可以使用 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”作为类的属性......它可以只是您方法中的局部变量，但也许您想从另一个方法中访问同一个实例，暂停它或手动结束。

PSstate()绝对应该能够接受输入参数（并且这里有一个功能请求），但我认为触发器适用于只有几个转换的情况。每当您需要触发高度动画时，您都不想随机化触发值。AnimationBuilder 是您案例的更好选择。

于 2017-07-31T12:40:27.270 回答