How to change for Angular in mat-tab-group the transition effect?

Question

The Angular mat-tab-group has for each mat-tab an animation effect already included. The given animation effect is quite annoying and therefore I want to use a different one. I have already one for fadein and fadeout from somebody else.

export const fadeAnimation = trigger('fadeAnimation', [
  // The '* => *' will trigger the animation to change between any two states
  transition('* => *', [
    // The query function has three params.
    // First is the event, so this will apply on entering or when the element is added to the DOM.
    // Second is a list of styles or animations to apply.
    // Third we add a config object with optional set to true, this is to signal
    // angular that the animation may not apply as it may or may not be in the DOM.
    query(
      ':enter',
      [style({ opacity: 0 })],
      { optional: true }
    ),
    query(
      ':leave',
      // here we apply a style and use the animate function to apply the style over 0.3 seconds
      [style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))],
      { optional: true }
    ),
    query(
      ':enter',
      [style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],
      { optional: true }
    )
  ])
]);

Trying to apply it like

<mat-tab-group animationDuration="0ms">
  <mat-tab label="First"> 
      <div [@fadeAnimation]="'enter'">
           Content 1 
      </div>
  </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

fails. Any hints how to apply it properly?

Updated the sample according to the suggestion of @ysf.

angular-material doesn't yet support overriding default animations, here is the [issue link](https://github.com/angular/components/issues/8857) however `mat-tab-group` allows to control duration of animation, as explained [here](https://material.angular.io/components/tabs/overview#controlling-the-tab-animation) but this is not you want. in order to apply a custom animation you need to disable angular animations on tab group and implement your own css animations. — ysf, Jul 05 '19 at 09:12
also i took a look at default tab animations in [sources here](https://github.com/angular/components/blob/master/src/material/tabs/tabs-animations.ts) and default animation translates a tab along the X axis. which could be very challenging (not impossible :) to achieve your custom desired animation. — ysf, Jul 05 '19 at 09:16
I have updated the example accordingly to your first comment. But somehow this still doesn't work. Don't know how to set the animations properly... :-/ You have an idea? — LeO, Jul 05 '19 at 09:32
AND does the `animationDuration` not apply as well to my custom transition? — LeO, Jul 05 '19 at 09:33

score 12 · Answer 1 · answered Dec 18 '19 at 17:26

I wasn't a fan of the slide left/right animation as well. You can do this workaround fade animation I put together.

You can disable the Angular Mat Tab animation then adding some css keyframe animation in the mat-tab-body-active class.

To Disable the animation, you can add this in the mat-tab.

<mat-tab-group [@.disabled]="true">

Or you can disable it in globally seen here

After disabling the animation, add this in your style.css file

.mat-tab-body.mat-tab-body-active {
  animation: fade 0.5s;
}


@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Check my the example here

score 4 · Accepted Answer · answered May 29 '20 at 13:35

Considering your code I guess you try to fade in a new tab while fading out a previous one.

Using Eldon's answer I suggest some minor changes:

.mat-tab-body {
    animation: fade-out 0.5s;
    opacity: 0;
}
.mat-tab-body.mat-tab-body-active {
    animation: fade-in 0.5s;
    opacity: 1;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

How to change for Angular in mat-tab-group the transition effect?

2 Answers2