bug(material/tabs): tab body height animation is broken

[EthanSK]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

You can even see this behaviour in the tab example in the docs https://material.angular.dev/components/tabs/examples
scroll down to the "Tab group that keeps its content inside the DOM when it's off-screen." example
it instantly hides the first tab content when u click the second, instead of waiting for the animation to complete, leading to a glitchy stutter

Reproduction

look at angular material's own docs ^

Expected Behavior

it should keep the content showing until the animation is completely done

Actual Behavior

it glitches and hides instantly

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[wagnermaciel]

The tab content is not being instantly hidden, the size of the tab body is immediately switching to the new tab panel's size which is significantly smaller than the first tab.

This seems to be a regression because I can see there is a transition on the tab body that isn't having the desired effect

.mat-mdc-tab-body-wrapper {
    transition: height 500ms cubic-bezier(0.35, 0, 0.25, 1);
}

[EthanSK]

womp womp

[crisbeto]

This is because we don't animate the tab height by default and it has worked this way since the tabs were introduced. You can opt into it by setting dynamicHeight on the mat-tab-group: https://material.angular.dev/components/tabs/overview#dynamic-height.