Question

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

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

我想在没有引导程序的情况下完成这项工作，或者使css3方法变得平坦，并在有角度的动画中完成。

下面是动画定义

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

当然，你不需要拥有动画播放器＆＃39;作为您的类的属性...它可以只是您方法中的局部变量，但也许您想要从另一个方法中访问同一个实例，暂停它或手动结束它。

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

Angular 4动态高度动画在动画后恢复

1 个答案: