我在我的项目中安装了角度 "@angular/animations": "^4.3.0" ，我正在尝试运行childAnimation（） .
我有两个动画，一个用于父级，一个用于子元素 . 两者都有：输入和：离开过渡 . 显示父元素取决于 *ngIf="isOpen" .
：输入对两个元素都有效但是：在子元素上不保留动画
为了做到这一点，我读过我必须使用 query('@*', animateChild()) . 问题是这仍然无效 . 这里有什么我想念的吗？我的猜测是：离开对孩子不起作用，因为只有父母是用* ngIf触发的，但我怎么能触发一个：然后给孩子过渡？
模板：
<div *ngIf="isOpen" [@fadeAnimation] (click)="close()">
<div [@slideHorizontalAnimation] (click)="$event.stopPropagation();">
...
</div>
</div>
动画：
export const fadeAnimation = trigger(
'fadeAnimation',
[
transition(
':enter',
[
style({ opacity: 0 }),
animate('100ms', style({ opacity: 1 }))
]
),
transition(
':leave',
[
style({ opacity: 1 }),
animate('100ms', style({ opacity: 0 })),
query('@*', animateChild())
]
)
]
);
export const slideHorizontalAnimation = trigger(
'slideHorizontalAnimation',
[
transition(
':enter',
[
style({ transform: 'translateX(-100%)', opacity: 0 }),
animate('100ms', style({ transform: 'translateX(0)', opacity: 1 }))
]
),
transition(
':leave',
[
style({ transform: 'translateX(0)', opacity: 1 }),
animate('100ms', style({ transform: 'translateX(-100%)', opacity: 0 }))
]
)
]
);
1 回答
这可能与https://github.com/angular/angular/issues/15798有关
和https://github.com/angular/angular/issues/15753
即使他们似乎被关闭，有些人似乎认为不是 . 第二个仍然开放
更新：它可能由尚未合并的https://github.com/angular/angular/pull/19006修复