問題タブ [mat-tab]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - mat-tab トランジションは、展開可能な行を持つ角度のあるマテリアル テーブルで他のアニメーションをトリガーします
mat-tab-group を含む画面があり、1 つのタブに展開可能な行を含むテーブルが含まれています。これらの行は、クリックした場合にのみ展開されますが、タブを変更して戻ってくると、すべての行が自動的に展開されます。ここで何が問題なのですか。?
これで初めて正しく表示されます
すべての行が展開されます
リンク : StackBlitz サンプル
angular - 元に戻した後、Angular アニメーションがマットタブ内で機能しない
シンプルな :enter/:leave アニメーションをマットタブ内のマットリストで動作させようとしています。最初のアニメーションは問題ありません。別のタブに切り替えて最初のタブに戻ると問題が発生します。その際、アニメーションはトリガーされず、リストは非表示のままです。
別のタブに切り替えると、タブのコンテンツがDOMから削除されるため、リストが消えるのは理にかなっています。コンテンツを DOM に保持する方法や、アニメーションが再びトリガーされるようにする方法はありますか?
これは私の現在のテンプレートとコンポーネントです。Stackblitz の例も作成しました。
https://stackblitz.com/edit/angular-9-material-starter-sqsqgu?file=src/app/app.component.html
答え
したがって、Kavinda Senarathne の回答を使用した後、完全に機能するテンプレートになりました。