Angular 动画—淡出适用于DIV，不完全适用于子组件

发布于04月08日

在Angular 17中，

我父母有一个动画

Parent Component - animation configuration

 animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('150ms', style({ opacity: 1 })),
      ]),
      transition(':leave', [
        animate('150ms', style({ opacity: 0 })),
      ]),
    ]),
  ],

View html element - fully works

当我将它应用到模板中的html时，它工作得很好:

   @if(showIcon) {

      <span class="material-symbols-outlined" [@fadeInOut]>
        check_circle
      </span>

    }

Child Component - half works (on fadeIn only)

当应用到子组件时，它只在淡出时起作用，当外部@ if中的布尔值切换回false时，它会立即剪切出来，而不是淡出.

    @if(showChildComponent){
      <app-child-component
        [@fadeInOut]
        [someInput]="Input"
        (someEvent)="handleEvent($event)"/>
    }
  }

这是一个bug，还是我的方法错了？

推荐答案

您的代码运行正常，也许您缺少添加的东西，请参考下面的stackblitz，请复制问题并分享回来，如果这个答案不起作用！

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import 'zone.js';
import { ChildComponent } from './app/child/child.component';
import { trigger, transition, style, animate } from '@angular/animations';
@Component({
  selector: 'app-root',
  standalone: true,
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('150ms', style({ opacity: 1 })),
      ]),
      transition(':leave', [animate('150ms', style({ opacity: 0 }))]),
    ]),
  ],
  imports: [ChildComponent],
  template: `
    @if(showChildComponent){
      <app-child
        [@fadeInOut]/>
    }
  `,
})
export class App {
  name = 'Angular';
  showChildComponent = false;

  ngOnInit() {
    setInterval(() => {
      this.showChildComponent = !this.showChildComponent;
    }, 1500);
  }
}

bootstrapApplication(App, {
  providers: [provideAnimations()],
});

Stackblitz Demo