How to change Angular animation duration from code

Question

I am trying to figure out how to dynamically change the duration of an angular animation based on a button click. I'd like to be able to set a button for slow, medium, and fast which would update the '600ms ease' to different durations but I cant successfully set it to a variable. I tried setting a variable named speed like this:

transition('rest =>right', animate(this.animationSpeed)),

but I get a warning that the "Object is possibly undefined"

Here is my animation trigger. Has any one dealt with this issue before?

animations: [ trigger('moveItem', [

  state('right', style ({ 
    transform: 'translateX(45vw)',
  })),
  state('left', style ({ 
    transform: 'translateX(-45vw)',
  })),
 
  transition('rest =>right', animate('600ms ease')),
  transition('right =>left', animate('600ms ease')),
  transition('left =>right', animate('600ms ease')),
  transition('rest =>left', animate('600ms ease')),
  transition('left =>rest', animate('600ms ease')),
  transition('right =>rest', animate('600ms ease')),

Thank you for your time!

Answer 1

What you're trying to do isn't possible for the moment, angular doesn't accept changing the duration with parameters

This may be a workaround

Bind it with css in the component.html file

<img src="anUrl"
   [ngStyle]="transition"
/>

Then switch the animation within the component.ts

translation = {}

onRight(duration: string): void {
  translation = {
   'transition-duration.ms': duration,
   transform: 'translateX(45vw)',
 }
}


onLeft(duration: string): void {
  translation = {
   'transition-duration.ms': duration,
    transform: 'translateX(-45vw)',
 }
}

dont forget to add the default transition within the component.scss file

img {
  transform: translate(0,0)
}

It's surely not not the perfect solution, but it may help