首页 文章

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

提问于
浏览 次
3

我正在使用Angular4和他们的动画 . 我正在尝试将动态值传递给动画声明，但在动画结束后它会反转为原始状态 .

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

我想在没有bootstrap的情况下完成这项工作，或者使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

angular animation angular-animations

1 回答

  • 3

    您可以使用AnimationBuilder而不是使用触发器和状态，这可以简化操作，并且当您不需要状态和触发器时，我认为它最适合这些情况 . 当然，动画的最终结果会保留，直到您决定再做一个动画 .

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

}

    然后，您可以简单地：

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

    附： state() 肯定能够接受输入参数（并且有一个功能请求here），但我认为触发器适用于当你需要触发高度动画时随机化触发值的情况 . AnimationBuilder是您案例的最佳选择 .

    回复于

相关问题