angular animations - pass parameter to trigger from template

Question

i have a simple animation trigger which fades the element in and out.

trigger('fadeInOut', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('0.1s ease-in-out')
  ]),
  transition(':leave', [animate('0.1s ease-in-out', style({ opacity: 0 }))])
])

is there a way I can "configure" this animation from the template on the fly like

<div [@fadeInOut]="2"></div>
<div [@fadeInOut]="'0.5s'"></div>

The thing I would like to achieve is to pass a set of coordinates, e.g. the offsetX and Y from a mouse click event and animate an element (which is not in the dom yet) to that position.

bertrandg · Accepted Answer · 2019-04-08 15:33:17Z

Here is a working solution to provide animation parameter from component template.

Define parameter(s) in your template like this:

<div *ngIf="isVisible" [@fadeInOut]="{value: true, params: {myTime: '.4s'}}"></div>
<div *ngIf="isVisible" [@fadeInOut]="{value: true, params: {myTime: '.8s'}}"></div>
<div *ngIf="isVisible" [@fadeInOut]="{value: true, params: {myTime: '1.2s'}}"></div>

And then use it inside animation definition:

animations: [
  trigger('fadeInOut', [
    transition(':enter', [style({ opacity: 0 }), animate('{{ myTime }} ease-in-out')]),
    transition(':leave', [animate('{{ myTime }} ease-in-out', style({ opacity: 0 }))])
  ])
],

Demo there: stackblitz

miladfm · Accepted Answer · 2018-05-12 20:50:25Z

Unfortunately there is no way to send parameters into angular animation after component was rendered.

but you can create trigger function with input value and send some parameter in to it.

const fadeInOut = 
(name, duration) => trigger(name, [
  transition(':enter', [
    style({ opacity: 0 }),
    animate(`${duration}s ease-in-out`)
  ]),
  transition(':leave', [animate(`${duration}s ease-in-out`, style({ opacity: 0 }))])
])

Component:

@Component({
   ...
  animations: [
    fadeInOut('fadeInOut-1', 0.5),
    fadeInOut('fadeInOut-2', 1)
  ]
})

HTML

<div [@fadeInOut-1]></div>
<div [@fadeInOut-2]></div>

see this example, that i created: https://stackblitz.com/edit/angular-animation-trigger-function

Collectives™ on Stack Overflow

angular animations - pass parameter to trigger from template

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related