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

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