AnimateChild 不适用于孩子：离开过渡

Question

我的项目中安装了 angular "@angular/animations": "^4.3.0"，我正在尝试运行 childAnimation()。

我有两个动画，一个用于父元素，一个用于子元素。都带有 :enter 和 :leave 转换。父元素根据*ngIf="isOpen"显示。

:enter 对这两个元素都有效，但 :leave 在子元素上没有动画效果

为了做到这一点，我读到我必须使用query('@*', animateChild())。问题是这仍然不起作用。我在这里有什么遗漏吗？我的猜测是:leave 不适用于孩子，因为只有父母是用 *ngIf 触发的，但是我怎样才能触发孩子的:leave 转换呢？

模板：

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

Answer 1

这个对我有用：

export const routerAnimation = [
  trigger('routeAnimation', [
    transition('* => *', [
      group([
        query(':leave', [animate('1s', style({}))]),  // animate's timings should bigger than the child's :leave animation. With this, the leaving component doesn't removed directly from DOM
        query('@*', animateChild()),
      ]),
    ]),
  ]),
];

Answer 2

这可能与https://github.com/angular/angular/issues/15798有关

[Animation] 在Angular4中，当元素被ngIf值改变销毁时，离开(* -> void)动画不会触发

和https://github.com/angular/angular/issues/15753

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

即使其中一个似乎已关闭，但有些人似乎认为并非如此。第二个还在打开

更新：它可能由尚未合并的https://github.com/angular/angular/pull/19006 修复