Как изменить для Angular в mat-tab-group эффект перехода?

Question

Angular mat-tab-group имеет для каждого mat-tab уже включенный анимационный эффект.Данный анимационный эффект довольно раздражает, и поэтому я хочу использовать другой.У меня уже есть один для fadein и fadeout от кого-то иначе .

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 }
    )
  ])
]);

Попытка применить его как

<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>

не удалась.Любые советы, как правильно его применить?

Обновлен образец в соответствии с предложением @ ysf.