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

huangapple
go评论112阅读模式
英文:

Creating an Angular Animation that can use an @Input() value?

问题

能否通过一个函数传递自定义参数来创建一个带有Angular动画的组件，然后在组件中使用生成的动画？

例如在这个演示中，动画是在单独的 animations.ts 中创建的：

  1. import {
  2.   trigger,
  3.   state,
  4.   style,
  5.   transition,
  6.   animate,
  7.   group,
  8. } from '@angular/animations';
  10. export const SlideInOutAnimation = [
  11.   trigger('slideInOut', [
  12.     state(
  13.       'in',
  14.       style({
  15.         width: '50%',
  16.         opacity: '1',
  17.         visibility: 'visible',
  18.       })
  19.     ),
  20.     state(
  21.       'out',
  22.       style({
  23.         width: '50px',
  24.         opacity: 0.3,
  25.         visibility: 'visible',
  26.       })
  27.     ),
  28.     transition('in => out', [
  29.       group([
  30.         animate(
  31.           '600ms ease-in-out',
  32.           style({
  33.             width: '50px',
  34.           })
  35.         ),
  36.       ]),
  37.     ]),
  38.     transition('out => in', [
  39.       group([
  40.         animate(
  41.           '1ms ease-in-out',
  42.           style({
  43.             visibility: 'visible',
  44.           })
  45.         ),
  46.         animate(
  47.           '600ms ease-in-out',
  48.           style({
  49.             width: '50%',
  50.           })
  51.         ),
  52.         animate(
  53.           '800ms ease-in-out',
  54.           style({
  55.             opacity: '1',
  56.           })
  57.         ),
  58.       ]),
  59.     ]),
  60.   ]),
  61. ];

然后可以在声明了动画的组件中通过 @Component 装饰器的 animations 属性导入并使用此动画。

但是如果我们想要获取一个 @Input 属性的值并将其传递给动画，应该如何做？

例如，如果我们有类似以下的内容：

  1. @Input()
  2. width: '50%';

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

英文:

Is it possible to create an Angular Animation with custom parameters passed in via a function, and then using the resulting animation within a component?

For example in this demo the animation is created in a separate animations.ts like this:

  1. import {
  2.   trigger,
  3.   state,
  4.   style,
  5.   transition,
  6.   animate,
  7.   group,
  8. } from '@angular/animations';
  10. export const SlideInOutAnimation = [
  11.   trigger('slideInOut', [
  12.     state(
  13.       'in',
  14.       style({
  15.         width: '50%',
  16.         opacity: '1',
  17.         visibility: 'visible',
  18.       })
  19.     ),
  20.     state(
  21.       'out',
  22.       style({
  23.         width: '50px',
  24.         opacity: 0.3,
  25.         visibility: 'visible',
  26.       })
  27.     ),
  28.     transition('in => out', [
  29.       group([
  30.         animate(
  31.           '600ms ease-in-out',
  32.           style({
  33.             width: '50px',
  34.           })
  35.         ),
  36.       ]),
  37.     ]),
  38.     transition('out => in', [
  39.       group([
  40.         animate(
  41.           '1ms ease-in-out',
  42.           style({
  43.             visibility: 'visible',
  44.           })
  45.         ),
  46.         animate(
  47.           '600ms ease-in-out',
  48.           style({
  49.             width: '50%',
  50.           })
  51.         ),
  52.         animate(
  53.           '800ms ease-in-out',
  54.           style({
  55.             opacity: '1',
  56.           })
  57.         ),
  58.       ]),
  59.     ]),
  60.   ]),
  61. ];

And this animation can then be imported an used in a component that declares the animation in the animations property of the @Component decorator.

But what if we want to take an @Input property value and pass that to the animation.

For example if we have something like:

  1. @Input()
  2. width: 50%;

How would we pass this parameter to the animation?

答案1

得分: 1

"parameters" 不那么难的动画

想象一些非常简单的

  1. animations: [
  2.     trigger('custom', [
  3.         transition('*=>*', [
  4.             style({ width: `{{width}}` }),
  5.             animate('500ms ease-in', style({ width: '100%' })),
  6.         ], { params: { width: '0' } }),
  7.     ])
  8. ]

请注意我们在 "params" 中包含了 "parameters"（它是一个对象），当我们想要使用它时，它被 {{ }} 包围。默认情况下需要指示参数。

唯一的，当在 .html 中定义动画时需要传递参数，例如，如果你有两个变量 "value" 和 "width"，你可以在 HTML 中这样写：

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

然后，当我们更改 "value" 时，动画开始

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

查看 stackblitz

在 stackblitz 中，我在组件中使用了一个变量，但你也可以使用一个输入变量，但请记住，如果你希望动画开始，你需要更改 "value"（除非你使用 :enter 和 :leave）。

英文:

An animation with "parameters" are not so difficult

Imagine some very simple

  1. animations:[
  2.     trigger(&#39;custom&#39;,[
  3.       transition(&#39;*=&gt;*&#39;, [
  4.         style({ width: `{{width}}`  }),
  5.         animate(&#39;500ms ease-in&#39;, style({ width: `100%`  })),
  6.       ],{params:{ width: &quot;0&quot;}}),
  7.     ])
  8.  ]

See that we include the "parameters" in "params" (that it's an object) and when we want to use it's enclosed by {{ }}. It's necesary indicate a params by defect

The only, when define the animation in the .html is pass the parameters, e.g. if you have two variables "value" and "width" you can have a html like

  1. &lt;div class=&quot;header&quot; [@custom]=&quot;{value:value,params:{width:width}}&quot; &gt;

Then, when we change the "value" the animation begins

  1. &lt;button (click)=&quot;width=&#39;50%&#39;;value=!value&quot;&gt;width:50%&lt;/button&gt;
  2. &lt;button (click)=&quot;width=&#39;0&#39;;value=!value&quot;&gt;width:0&lt;/button&gt;

See stackblitz

In the stackblitz I use a variable in the component, but you can use an Input, but rememeber that if you want animation begings you need change the "value" (unless you use :enter and :leave)

huangapple
  • 本文由 发表于 2023年7月11日 11:00:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/76658461.html
  • angular
  • angular-animations
  • animation
  • javascript
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定