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

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

2 个答案: