可能的原因是动画触发器未正确应用于子元素。要解决这个问题,可以尝试在子元素上设置动画触发器。以下是一个示例代码:
@Component({
selector: 'parent-component',
templateUrl: './parent.component.html',
animations: [
trigger('myAnimation', [
transition(':enter', [
style({ opacity: 0 }),
animate('500ms', style({ opacity: 1 })),
])
])
]
})
export class ParentComponent {
state = true; // boolean value to toggle animation
toggleAnimation() {
this.state = !this.state;
}
}
在以上示例中,可以看到动画触发器 '@myAnimation' 被应用于了子组件中的元素。同时,可以使用一个 boolean 类型的变量 'state' 来切换动画效果。当 'state' 的值发生变化时,动画效果也会随之改变。
希望以上解决方法可以帮助您解决 Angular 动画未应用于子元素的问题。