Angular Animation如何精准识别匹配:leave的当前正在执行动画的元素

方案1：直接在动画定义中实现需求（无需额外回调，Angular 7 原生支持） #

你的核心需求是给:leave元素设置pointer-events: none，完全不需要写额外的回调逻辑，直接在动画的query规则中添加对应样式即可，样式会自动应用到所有匹配的离开元素上，动画结束后元素会被直接销毁，不会有残留副作用：

export function fadeIn() {
    const opt = { optional: true };
    return [
        query(':enter, :leave', style({ position: 'fixed', width: '100%' }), opt),
        query(':enter', style({ opacity: '0' }), opt),
        // 直接给离开元素加禁用点击的样式
        query(':leave', style({ opacity: '0', pointerEvents: 'none' }), opt),
        group([
            query(':enter', group([
                animate('11000ms ease', style({opacity: '1'})),
                animateChild()
            ]), opt)
        ])
    ];
}

方案2：如果需要在回调中明确获取离开/进入元素 #

如果你还有其他逻辑需要在动画回调中处理对应元素，可以利用Angular动画模块原生添加的过渡状态类来识别：
Angular执行过渡动画时，会给对应元素自动添加状态类：

• 进入动画的元素会添加ng-enter、ng-enter-active类
• 离开动画的元素会添加ng-leave、ng-leave-active类

你可以直接在动画回调中从父容器（就是回调返回的animEvent.element，即router-outlet-wrapper）查询对应类的子元素即可，完全不需要依赖DOM顺序这类不稳定的实现细节：

// app.component.ts 中的动画回调函数
onAnimationStart(animEvent: AnimationEvent) {
  const wrapper = animEvent.element as HTMLElement;
  // 精准获取当前正在执行离开动画的元素
  const leaveElement = wrapper.querySelector(':scope > .ng-leave') as HTMLElement;
  // 获取当前正在执行进入动画的元素
  const enterElement = wrapper.querySelector(':scope > .ng-enter') as HTMLElement;

  if (leaveElement) {
    // 在这里执行你需要的自定义逻辑
  }
}

以上两个方案都兼容Angular 7及以上所有版本，不需要升级框架即可使用。

内容的提问来源于stack exchange，提问作者goat