Angular 17，值更改时淡出动画，不起作用

Question

我似乎无法让它发挥作用。

在子组件中：

animations: [
        trigger('simpleFadeAnimation', [
            transition('*=>*', [
                style({opacity: 0}),
                animate(600)
            ])
        ])
    ]


 <p [@simpleFade]>
    {{ fieldValue() ? fieldValue() : "-" }}
  </p>

家长：

这里的输入值是有条件的，并且取决于在父级中切换布尔值

<app-child
  [fieldValue]="booleanVariable ?? false) ? field.value : field.valueAlt"/>

当值切换时，我无法让子项中的文本字段淡出。它只是不断捕捉到新值。有什么想法我可能会出错吗？

提前致谢！

Answer 1

触发器名称必须与出现问题的 html 属性匹配！

儿童ts

import { animate, style, transition, trigger } from '@angular/animations';
import { Component, input } from '@angular/core';

@Component({
  selector: 'app-child',
  standalone: true,
  imports: [],
  templateUrl: './child.component.html',
  styleUrl: './child.component.css',
  animations: [
    trigger('simpleFadeAnimation', [ // this is the name that should be set in html
      transition('*=>*', [style({ opacity: 0 }), animate(600)]),
    ]),
  ],
})
export class ChildComponent {
  fieldValue = input();
}

子 html

<p [@simpleFadeAnimation]> <!-- name changed to match trigger name -->
  {{ fieldValue() ? fieldValue() : '-' }}
</p>

Stackblitz 演示