从 Angular 材质工具提示中删除动画（Angular 4）答案

【问题标题】：Removing animation from Angular Material Tooltip (Angular 4)从 Angular 材质工具提示中删除动画（Angular 4）
【发布时间】：2020-10-12 16:24:51
【问题描述】：

我正在使用 Angular 4 并在我的应用程序中实现了 Angular Material 工具提示，如下所示（一切正常）

但是，一旦我将鼠标悬停在工具提示 #nav div 上，工具提示就会动画，并且我在官方文档中看不到任何属性来禁用此功能 - 仅针对此元素禁用此动画的最佳方法是什么

https://material.angular.io/components/tooltip/api

<div id="nav" matTooltip="Filter" 
     matTooltipShowDelay="1000" 
     matTooltipPosition="above">

【问题讨论】：

运气好吗？
我不相信我绕过它，最后只是保留了动画

标签： angular tooltip css-animations angular-material2

【解决方案1】：

我也有同样的需求，我相信目前的答案是：我们做不到。我的意思是我们可以，但我们需要分叉材料，或者创建一个拉取请求并等待接受。

工具提示代码可以在here找到，它导入file called tooltip-animations。正如我们所见，工具提示是由 javascript 动画的，所以我们不能轻易地用 css 覆盖它。部分代码摘录：

show(delay: number): void {
// Cancel the delayed hide if it is scheduled
if (this._hideTimeoutId) {
  clearTimeout(this._hideTimeoutId);
  this._hideTimeoutId = null;
}

// Body interactions should cancel the tooltip if there is a delay in showing.
this._closeOnInteraction = true;
this._showTimeoutId = setTimeout(() => {
  this._visibility = 'visible';
  this._showTimeoutId = null;

  // Mark for check so if any parent component has set the
  // ChangeDetectionStrategy to OnPush it will be checked anyways
  this._markForCheck();
}, delay);

它显示了我们可以从我们的应用程序传递给 tolltip 的“延迟”参数如何只是在更改工具提示属性之前传递给超时函数的参数。

 tooltipState: trigger('state', [
state('initial, void, hidden', style({opacity: 0, transform: 'scale(0)'})),
state('visible', style({transform: 'scale(1)'})),
transition('* => visible', animate('200ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
  style({opacity: 0, transform: 'scale(0)', offset: 0}),
  style({opacity: 0.5, transform: 'scale(0.99)', offset: 0.5}),
  style({opacity: 1, transform: 'scale(1)', offset: 1})
]))),
transition('* => hidden', animate('100ms cubic-bezier(0, 0, 0.2, 1)', style({opacity: 0}))),])

它显示了角度动画框架将如何动画可见性变化，并将持续 100-200 毫秒。

我看不到任何方法可以从使用 mat-tooltip 的应用中修改此行为。

【讨论】：