OnLeave animation causes mat-tab to be broken

[baptisterey]

OnLeave animations are called when you switch tabs but OnEnter animations are not called back when you reenter the same tab.

This makes the elements go invisible for ever.

I manage to reproduce the bug via stackblitz.

[filipows]

Hi @Civetdelapin,

Thanks for your contribution. I looked at your example and I'm not sure which scenario you want to achieve. Do you want to animate fadeIn/fadeOut tabs

• every time you navigate between tabs
• or just once at the beginning when mat-tab-group is created and once at the end?

If it's the first scenario, then maybe it's worth checking out version of mat-tab-group where the tab content is loaded lazily (when activated): example in stackblitz

[baptisterey]

Hey, Thanks for the quick answer!

What I am trying to achieve, is I have a list of items in each tabs, wich I can delete and add elements from (that's where the animations must happend).

It do not require the tab content to be loaded lazily as I do not want the animations to trigger when switching tabs.

My problem is " Why the leave animation is called when switching tabs (maybe it's more an mat-tab issue...) ?"

I updated the stackblitz to be more specific : stackblitz

I tried with the tab where the content is loaded lazily, it's working great (event if it's not quite what I want, it is a great workaround).

[filipows]

Hi @Civetdelapin, I see your point now. It looks like after switching tabs, the component is stuck on its final state of animation on leave. It looks like that it might be material issue, you can have a look at this: https://github.com/angular/material2/issues/11475 which seems very similar to what we're trying to achieve.

Talking about workarounds, if lazy loaded tab content is a viable workaround, and you wouldn't like to have list of items animated while switching between tabs, you can add a "dummy" onEnter animation on the parent element with: animateChildren: 'none', which will prevent from animating items when tab-content is created, but will allow for animations after that. Here's stackblitz

[baptisterey]

Hi @filipows, It's seems indeed that this is a material issue...

The stackblitz you just provided will do the trick for now, thank you very much for your help!