创建可以使用 @Input() 值的 Angular 动画？

Question

是否可以使用通过函数传入的自定义参数创建 Angular 动画，然后在组件中使用生成的动画？

例如在这个演示中动画是在单独的

animations.ts

中创建的，如下所示：

import {
  trigger,
  state,
  style,
  transition,
  animate,
  group,
} from '@angular/animations';

export const SlideInOutAnimation = [
  trigger('slideInOut', [
    state(
      'in',
      style({
        width: '50%',
        opacity: '1',
        visibility: 'visible',
      })
    ),
    state(
      'out',
      style({
        width: '50px',
        opacity: 0.3,
        visibility: 'visible',
      })
    ),
    transition('in => out', [
      group([
        animate(
          '600ms ease-in-out',
          style({
            width: '50px',
          })
        ),
      ]),
    ]),
    transition('out => in', [
      group([
        animate(
          '1ms ease-in-out',
          style({
            visibility: 'visible',
          })
        ),
        animate(
          '600ms ease-in-out',
          style({
            width: '50%',
          })
        ),
        animate(
          '800ms ease-in-out',
          style({
            opacity: '1',
          })
        ),
      ]),
    ]),
  ]),
];

然后可以导入此动画并在组件中使用，该组件在

animations

装饰器的

@Component

属性中声明动画。

但是如果我们想要获取

@Input

属性值并将其传递给动画怎么办？

例如，如果我们有类似的东西：

@Input()
width: 50%;

我们如何将此参数传递给动画？

Answer 1

有“参数”的动画并没有那么难。

想象一些简单的事情。

animations:[
    trigger('custom',[
      transition('*=>*', [
        style({ width: `{{width}}`  }),
        animate('500ms ease-in', style({ width: `100%`  })),
      ],{params:{ width: "0"}}),
    ])
 ]

我们将“参数”包含在“params”中（它是一个对象），当我们想要使用它时，它被

{{

}}

括起来。

需要通过缺陷来指示参数。

只有在 .html 中定义动画时才传递参数，例如如果你有两个变量“值”和“宽度”，你可以有一个类似的html

<div class="header" [@custom]="{value:value,params:{width:width}}" >

然后，当我们更改“值”时，动画开始

<button (click)="width='50%';value=!value">width:50%</button>
<button (click)="width='0';value=!value">width:0</button>

参见stackblitz

在 Stackblitz 中，我在组件中使用变量，但您可以使用输入，但请记住，如果您想要动画开始，则需要更改“值”（除非您使用 :enter 和 :leave）