表格数据瞬间清空导致看不到过渡效果?-灵析社区

写了一个bug demo, 效果如下  线上运行网址 [https://stackblitz.com/~/edit/djnurk?file=src%2Fapp%2Ftable-b...](https://link.segmentfault.com/?enc=Lm5OELdHtSt6FR3O5Qnvbw%3D%3D.nmqcZuUn4zI%2BUVMEZO1%2FQBqoLcb9Bu6nR6f8z3LKmUqjiSJQYHK2AcrACmYkBhCSJp%2Fm4vtxFD%2BL1lSnf2%2BENpJrWJmXHiugKG6lTJSUwjI%3D) 这是我用到路由转场动画 + Material Table 组件导致的一个转场bug [https://angular.cn/guide/route-animations](https://link.segmentfault.com/?enc=hCzEjRe1YLGz2k3IgjbbLg%3D%3D.EEnDcEdNF%2Br7H%2FRvzmRFs2G%2FUtto4tqoa%2BmFWE5xmgowWwklt5AIH7cDyjbY2%2FEB) [https://v14.material.angular.io/components/table/overview](https://link.segmentfault.com/?enc=1WC5TIuaffn9RnbZx0AHQQ%3D%3D.dTN11Gs7WaC%2BhjAtDpB5Omfo%2FSuvEAlWWFVsgyLExh%2FBmUnlvmitsXqi%2B%2BG%2FoCp6zp3sx9wh98khUowNM%2BPrdg%3D%3D) 可以看到我在 Page1 里放了一个 mat-table, 当我从 Page1 转场到 Page2 时候, 组件内部的数据自动被清空了(dom元素自动删除), 最终导致我无法完整的看到表格渐变透明的过渡效果. 查阅了文档但是未找到这部分的详细说明 **实际需求: 在转场时, 我希望能完整的看到表格数据的过渡效果, 而不是瞬间消失.** **或者在dom被删除之前做一次拦截? 有没有什么方法能实现?** 最后我贴一段 demo 的详细代码, 希望有懂 Angular 的大佬能刚忙指点指点, 万分感谢! 文件列表  animation.ts import { animate, query, style, transition, trigger } from "@angular/animations"; export const defaultTimings = '300ms linear'; export const routeTransitionAnimation = trigger('routeTransitionAnimation', [ transition('* *', [ query(':enter', [style({ opacity: 0 })], { optional: true }), query(':leave', [animate(defaultTimings, style({ opacity: 0 }))], { optional: true }), query(':enter', [animate(defaultTimings, style({ opacity: 1 }))], { optional: true }) ]) ]); app.component.ts import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { routeTransitionAnimation } from './animation'; @Component({ selector: 'rxc-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], animations: [routeTransitionAnimation] }) export class AppComponent { title = 'demo'; doRouteTransitionAnimation(outlet: RouterOutlet) { return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']; } } app.component.html Page1 Page2 app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { Page1Component } from './page1/page1.component'; import { Page2Component } from './page2/page2.component'; const routes: Routes = [ { path: 'page1', component: Page1Component, data: { animation: 'page1' } }, { path: 'page2', component: Page2Component, data: { animation: 'page2' } } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } styles.scss #routerOutletContainer { position: relative; } #routerOutletContainer>* { position: absolute; width: 100%; } 版本是14 package.json { "@angular/animations": "^14.0.0", "@angular/material": "^14.0.0", } ### 后续   这两张是路由切换前和切换时的dom元素, 切换的时候内部元素被清空了, 清空的操作应该是mat-table内置的