表格数据瞬间清空导致看不到过渡效果?
写了一个bug demo, 效果如下
线上运行网址 https://stackblitz.com/~/edit/djnurk?file=src%2Fapp%2Ftable-b...
这是我用到路由转场动画 + Material Table 组件导致的一个转场bug
https://angular.cn/guide/route-animationshttps://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%;
}
版本是14package.json
{
"@angular/animations": "^14.0.0",
"@angular/material": "^14.0.0",
}
后续
这两张是路由切换前和切换时的dom元素, 切换的时候内部元素被清空了, 清空的操作应该是mat-table内置的
回复
1个回答
test
2024-06-23
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容