typescript - 表格数据瞬间清空导致看不到过渡效果?

Question

写了一个bug demo, 效果如下

线上运行网址 https://stackblitz.com/~/edit/djnurk?file=src%2Fapp%2Ftable-b...

这是我用到路由转场动画 + Material Table 组件导致的一个转场bug

https://angular.cn/guide/route-animations
https://v14.material.angular.io/components/table/overview

可以看到我在 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

<a routerLink="page1">Page1</a> <a routerLink="page2" style="margin-left: 2rem;">Page2</a><div [@routeTransitionAnimation]="doRouteTransitionAnimation(outlet)" id="routerOutletContainer">    <router-outlet #outlet="outlet"></router-outlet></div>

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内置的

Answer 1

可以参考这个解决方案，亲测可行
https://github.com/angular/components/issues/8057#issuecomment-536628799