Angular 4中如何仅禁用指定元素的Angular Material Tooltip动画

嘿，我之前刚好处理过类似的需求，给你几个实用的方案，按推荐优先级排序：

方案1：CSS精准覆盖（最推荐） #

Angular Material的Tooltip动画是通过内置的CSS动画和过渡效果实现的，我们可以通过CSS精准定位#nav元素下的Tooltip，强制禁用它的动画，完全不影响其他元素的Tooltip。

在你的组件样式文件里添加这段代码：

::ng-deep #nav .mat-tooltip {
  animation: none !important;
  transition: none !important;
}

或者更精准地针对触发器元素，确保只影响#nav下的Tooltip：

::ng-deep #nav [matTooltip] {
  --mat-tooltip-transition-duration: 0ms;
}

注：Angular 4对应的Material版本是2.x，如果--mat-tooltip-transition-duration这个CSS变量不生效，用第一段强制覆盖动画的代码肯定没问题。

为什么这个最优？纯样式解决，不需要修改任何组件逻辑，代码量最少，而且精准控制只作用于#nav元素，不会污染全局样式。

方案2：自定义无动画Tooltip指令（适合复用场景） #

如果你以后需要在多个地方禁用Tooltip动画，可以自定义一个继承自MatTooltip的指令，重写它的动画配置：

首先创建一个指令文件no-animation-tooltip.directive.ts：

import { MatTooltip } from '@angular/material';
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[matTooltipNoAnimation]',
})
export class NoAnimationTooltipDirective extends MatTooltip {
  constructor(elementRef: ElementRef) {
    super(elementRef);
    // 清空动画数组，禁用所有Tooltip动画
    this.animations = [];
  }
}

然后在你的模块里声明这个指令，之后在#nav元素上使用：

<div #nav matTooltip="你的提示文本" matTooltipNoAnimation>导航元素</div>

这个方案适合需要多次复用无动画Tooltip的场景，代码更优雅，但比CSS方案稍复杂。

不推荐的方案 #

• 不要尝试修改全局Material样式，会影响所有Tooltip；
• 不要用AnimationBuilder手动控制动画，太繁琐，没必要。

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