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

Question

我目前正在一个应用程序中实现动画，我面临着动画转换的计时存储在json配置文件中的问题(我无法改变这一点)。有一个服务可以提供所需的值，但是因为Angular Animations是在@Component块中声明的，所以我无法访问该服务。

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中调用...