Angular Animations：如何动态设置过渡时间？

Question

我目前正在一个应用程序中实现动画，我面临的问题是动画转换的时间存储在一个 json 配置文件中（我无法更改它）。有一个服务可以提供所需的值，但由于在 @Component 块中声明了 Angular Animations，我无法访问该服务。

transition('start => end', [animate(ConfigService.config.delay.firstDelay)])

正如预期的那样，这会导致未定义的错误。我看到可以使用AnimationBuilder 构建动画，但这样做似乎只能提供提供简单动画的机会，而无需特定的回调和多个状态转换。

以动态方式实现过渡时间的最佳方法是什么？

Answer 1

您可以使用“手动动画”。典型动画和手动动画的“翻译”并不难

在您定义的组件中

import {style,animate,AnimationBuilder,AnimationFactory,AnimationPlayer} from "@angular/animations";

 private player: AnimationPlayer;
 constructor(private builder: AnimationBuilder) {}

并创建一个“动画”元素的函数，例如

/*I want "recreate" the animation
 transition(':enter', [
    style({ opacity: 0 }),
    animate('100ms', style({ opacity: 1 })),
  ]),
  transition(':leave', [
    animate('100ms', style({ opacity: 0 }))
  ])
*/
animate(element: any, state:string) {
    const myAnimation = state=='enter'?
       this.builder.build([
          style({ opacity: 0 }),
          animate(this.timing, style({ opacity: 1 }))
       ]):
       this.builder.build([
        animate(this.timing, style({ opacity: 0 }))
     ])
     ;
    this.player = myAnimation.create(element);
    //you can control when the animation is finish
    this.player.onDone(()=>{
        this.toogle=!this.toogle;
    })
    this.player.play();
  }

所以你可以拥有，例如

<div #div style="background-color:red;width:5rem;height:5rem"></div>
<button (click)="animate(div,toogle?'enter':'leave');">click</button>

或使用 ViewChild 获取元素并制作动画或调用 ngOnInit 或...