Angular Animations: How to set transition timing dynamically?

Question

I'm currently implementing Animations in an application and I face the problem that the timings for animation transitiions are stored in a json config file (I can't change that). There is a service that provides the values needed but since Angular Animations are declared in the @Component block I am not able to access the service.

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

This results as expected in an undefined error. I saw that one can build animations using the AnimationBuilder but it seems doing that way only provides the opportunity to provide simple animations without specific callbacks and multiple state transitions.

What would be the best approach to implement the transition timing in a dynamic way?

I'm afraid you need create the animations manually using AnimationBuilder: angular.io/api/animations/AnimationBuilder — Eliseo
– Eliseo, Commented Jun 30, 2021 at 10:03

Eliseo · Accepted Answer · 2021-06-30 10:20:09Z

1

you can use "manual Animations". the "translation" from a typical animation and a manual animation it's not difficult

In your component you defined

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

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

And create a function that "anime" an element, e.g.

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

So You can has, e.g.

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

Or using ViewChild get an element and make the animation or call in ngOnInit or...

edited Jun 30, 2021 at 10:20

answered Jun 30, 2021 at 10:18

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hullunist Over a year ago

Do you know how to add the @trigger.done callback to an animation created using the AnimationBuilder? That would be crucial in order to display animations after the previous one finished. AnimationPlayer.play() takes no parameters for Callbacks. There is the Animation.Stop() function that seems to trigger the onDone Callback but the API does not mention how you set what function is called as a result.

Eliseo Over a year ago

I jsut updated the answer, is "control" the this.player.onDone before call to player.play()

hullunist Over a year ago

I will implement it like this after my break and if it works I will mark your answer as accepted. I must have overlooked the onDone() function when I checked the documentation.

Collectives™ on Stack Overflow

Angular Animations: How to set transition timing dynamically?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related