Question

我的项目中安装了角"@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 }))
            ]
        )
    ]
);

Answer 1

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

有关

[动画]在Angular4中，当ngIf值更改销毁元素时，不会触发（* - ＆gt; void）动画

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

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

即使他们似乎被关闭了，但有些人似乎认为不是。第二个仍然开放

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

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

1 个答案: