Angular AnimateChild不适用于子对象：离开转换

我的项目中安装了angular

“@angular/animations”：“^4.3.0”

，我正在尝试运行childAnimation（）

我创建了两个动画，一个用于父元素，一个用于子元素。同时使用：进入和：离开转换。父元素的显示取决于

*ngIf=“isOpen”

：enter在两个元素上都有效，但：leave在子元素上未设置动画

为了做到这一点，我读到我必须使用

query（'@*'，animateChild（））

。问题是这仍然不起作用。这里有我遗漏的东西吗？我的猜测是：leave对孩子不起作用，因为只有父母被*ngIf触发，但是我怎么能在孩子身上触发：leave转换呢

模板：

<div *ngIf="isOpen" [@fadeAnimation] (click)="close()">
    <div [@slideHorizontalAnimation] (click)="$event.stopPropagation();">
    ...
   </div>
</div>

这可能与

[动画]在Angular4中，leave（*->void）当元素被ngIf值更改破坏时，动画不会激发

及

使动画不在子组件的嵌套动画中运行

即使其中一家看起来是关闭的，有些人似乎认为不是。第二个仍然开放

---

更新：它可能是由尚未合并的

修复的，这就是为什么我添加了animateChild（），如第一个链接中的注释所述，但这不起作用。实际上，当我将

*ngIf=“isOpen”

添加到元素（父元素和子元素）时，它就开始工作了，但这似乎更像是一种解决方法。可能会修复它并使其按预期工作，我们只需等待合并和希望；）

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 }))
            ]
        )
    ]
);