css 如何在Angular中禁用mat-tab-group中的过渡动画?

von4xj4u  于 2023-04-08  发布在  Angular
关注(0)|答案(1)|浏览(127)

我试图禁用过渡在垫标签组.首先,我尝试在CSS,但它不工作.现在我尝试用JavaScript它仍然不工作.我的代码如下所示:

function fadeAnimation() {return trigger('fadeAnimation', [
  state('void', style({width: '100%', height: '100%'})),
  state('*', style({width: '100%', height: '100%'})),
  transition(':enter', [
    style({
      transform: 'translateY(100%)',
      position: 'fixed'
    }),
    animate('0.0s cubic-bezier(0.35, 0, 0.25, 1)', style({transform: 'translateY(0%)'}))
  ]),
  transition(':leave', [
    style({
      transform: 'translateY(0%)',
      position: 'fixed'
    }),
    animate('0.0s cubic-bezier(0.35, 0, 0.25, 1)', style({transform: 'translateY(100%)'}))
  ])
  ]);}

如果有人知道如何解决这个问题,请让我知道。我不知道我做错了什么。提前感谢

azpvetkf

azpvetkf1#

添加animationDuration="0ms"如下:

<mat-tab-group animationDuration="0ms">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

相关问题