角度动画 - 将参数传递给模板触发

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