В Угловом 17
У моего родителя есть эта анимация
Родительский компонент — конфигурация анимации
animations: [
trigger('fadeInOut', [
transition(':enter', [
style({ opacity: 0 }),
animate('150ms', style({ opacity: 1 })),
]),
transition(':leave', [
animate('150ms', style({ opacity: 0 })),
]),
]),
],
Просмотр html-элемента - полностью работает
Когда я применяю его к html в шаблоне, это работает нормально:
@if (showIcon) {
<span class = "material-symbols-outlined" [@fadeInOut]>
check_circle
</span>
}
Дочерний компонент - работает наполовину (только для FadeIn)
Однако при применении к дочернему компоненту он работает только при появлении и сразу же отключается, а не исчезает, когда логическое значение во внешнем @if переключается обратно на false.
@if (showChildComponent){
<app-child-component
[@fadeInOut]
[someInput] = "Input"
(someEvent) = "handleEvent($event)"/>
}
}
Это ошибка или мой подход неправильный?
🤔 А знаете ли вы, что...
С помощью Angular можно создавать анимации и переходы между элементами интерфейса.
Ваш код работает нормально, возможно, вам что-то не хватает, обратитесь к приведенному ниже 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()],
});