問題タブ [mat-tab]

div に角のあるアニメーションがあります。div の内部には、マテリアル タブ コンポーネントがあります。div がページにアニメーション化されているときにタブの 1 つをクリックすると、div のアニメーションが終了するとタブのコンテンツが消えます。

これは、私の問題を示すためのスタックブリッツです。 https://stackblitz.com/edit/angular-5papgq

再現する手順。

1. タブを含む div がページにフェードインするので、タブの 1 つをクリックしてタブを変更します。

2. すべてのタブがページへのアニメーション化を完了するまで待ちます。

3. タブのコンテンツが消えるのを確認します。

これは私のアニメーションの問題ですか、それともタブ コンポーネント自体の問題ですか?

mat-tab現在アクティブなタブのフォームが汚れている場合、タブの変更を防止しようとしていました。

しかし、タブ変更イベントをインターセプトする方法が見つかりませんでした。

イベントがあっても、selectedTabChangeタブの変更を防ぐことはできません。タブの変更後にプログラムでのみタブを切り替えることができます。

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

編集：

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