2

我"@angular/animations": "^4.3.0"在我的项目中安装了 angular，我正在尝试运行 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 }))
            ]
        )
    ]
);
4

2 回答 2

1

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

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

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

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

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

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

于 2017-09-05T20:08:27.733 回答
0

这个对我有用：

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()),
      ]),
    ]),
  ]),
];
于 2021-11-07T13:07:21.693 回答