5

Angular Material のマットタブ アニメーション (コンテンツが所定の位置にスライドするときに発生するアニメーション) を無効にしたいと考えています。[@.disabled] 属性を使用できることはわかっていますが、純粋な css で同じ効果を達成できるかどうか疑問に思っています。

編集：

私たちの UX チームは、何らかの理由で適切ではないと考えているため、マテリアル タブからスライド アニメーションを削除したいと考えています。タブコンポーネントを複数回使用する可能性のあるプロジェクトが複数あるため、現在のタブと今後のタブでこのアニメーションを削除する方法が必要でした。理想的には、HTML に属性を追加する (そして追加を開始する) ようにユーザーに指示したくありません (ユーザーはそうすることを忘れる可能性があります)。また、これらのプロジェクトには、主要な css スタイルを提供するプロジェクトが依存関係にあります。すべてのプロジェクトで共有されているメインの css スタイルシートでこれらのアニメーションを削除するというアイデアがありました。以下を追加しようとしましたが、うまくいきませんでした。

.mat-tab-body-content, .mat-tab-body, .mat-tab-body-wrapper { 
  transition: none !important;
  transform: none !important; 
  animation-duration: 0ms !important; 
}
4

3 に答える 3

19

Angular Material はアニメーションをオーバーライドする公式の方法を提供していないため、本当に必要な場合を除き、お勧めしません (そのためにはいくつかの汚いハックを行う必要があります)。あなたのケースを見ると、animationDurationto を適用することで同じ結果を得ることができるため、CSSを上書きする意味はありませんmat-tab-group。これは公式の解決策でもあります。

<mat-tab-group animationDuration="0ms">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

プロジェクト内のすべてのタブグループに変更をグローバルに適用する場合は、挿入する必要がありますMAT_TABS_CONFIG

app.module.ts

import { MAT_TABS_CONFIG } from '@angular/material';

@NgModule({
  ...
  providers: [
    { provide: MAT_TABS_CONFIG, useValue: { animationDuration: '0ms' } }
  ]
})
于 2019-08-16T12:43:08.417 に答える
2

以下のコードを使用して、アニメーションを無効にすることもできます。

<div [@.disabled]="true">
  <mat-tab-group >
    <mat-tab label="First"> Content 1 </mat-tab>
    <mat-tab label="Second"> Content 2 </mat-tab>
    <mat-tab label="Third"> Content 3 </mat-tab>
  </mat-tab-group>
</div>

https://stackblitz.com/edit/angular-ns4vi5?file=app%2Ftab-group-basic-example.html

于 2019-12-23T04:40:45.160 に答える