Угловые анимации - передать параметр для запуска из шаблона

Question

У меня есть простой триггер анимации, который затухает элемент в и из.

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

Есть ли способ, которым я могу "настроить" эту анимацию из шаблона на лету, как

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

Я хотел бы добиться того, чтобы передать набор координат, например, offsetX и Y из события щелчка мыши, и анимировать элемент (которого еще нет в dom) в эту позицию.

Answer 1

К сожалению, после рендеринга компонента невозможно отправить параметры в угловую анимацию.

но вы можете создать триггерную функцию с входным значением и отправить в нее некоторый параметр.

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({
   ...
  animations: [
    fadeInOut('fadeInOut-1', 0.5),
    fadeInOut('fadeInOut-2', 1)
  ]
})

HTML

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

посмотрите на этот пример, который я создал: https://stackblitz.com/edit/angular-animation-trigger-function

Answer 2

Вот рабочее решение для предоставления параметра анимации из шаблона компонента.

Определите параметры в шаблоне следующим образом:

<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>

А затем используйте его в определении анимации:

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

Демо там: stackblitz