Question

我有一个角度动画，可以扩展/折叠元素的高度，如下所示：

<div *ngIf="!loading" [@expandCollapse]>
  ...
</div>

这是动画

import { trigger, transition, style, animate, state } from '@angular/animations';
import { defaultDuration, defaultEasing } from './animation-variables';

export const expandCollapseAnimation = trigger('expandCollapse', [
    state('*', style({
        height: '*',
    })),
    state('void', style({
        height: '0',
        'overflow-y': 'hidden',
    })),
    //Same transition duration/easing when entering or leaving
    transition('* => *', animate(`${defaultDuration}ms ${defaultEasing}`)),
]);

在应用程序的其他地方，我有某些指令可以监视窗口调整大小或滚动事件，这些事件会导致一些小的UI更改。当使用上述动画的元素完成时，有时会导致该元素的高度高于当前视口，因此我需要触发这些窗口事件之一，以使其他指令执行其任务。

我知道我可以添加(@expandCollapse.done)="animationDone($event)"，但我不想每次使用都必须这样做。有什么办法可以使我在全局范围内执行此操作，以便在完成此特定动画后只运行一个函数？

角度动画完成时的回调功能？

0 个答案: