CSS transition doesn't work on MatExpansionPanel

[PeteJobi]

Describe the bug I want the details sections of MatAccordion to animate when animating and collapsing. Setting the transition styles don't work. I've tried applying the Style="transition: height 1s" to both MatAccordion and MatExpansionPanelDetails. Doesn't work.

To Reproduce

<MatAccordion Class="@Class" Style="transition: height 1s"> @*transition applied here*@
    <MatExpansionPanel @bind-Expanded="@DefaultOpenState" HideToggle="true">
        <MatExpansionPanelSummary Class="h-auto p-1 primary-bg">
            <MatExpansionPanelHeader>
                <div class="d-flex">
                    <MatIcon Icon=@(DefaultOpenState ? "keyboard_arrow_up" : "keyboard_arrow_down") Class="mr-2" />
                    <span style="white-space: nowrap">@Title</span>
                </div>
            </MatExpansionPanelHeader>
        </MatExpansionPanelSummary>
        <MatExpansionPanelDetails Class="p-2" Style="transition: height 1s"> @*transition also applied here*@
            @ChildContent
        </MatExpansionPanelDetails>
    </MatExpansionPanel>
</MatAccordion>

Expected behavior The details panel should slide up and down when collapsing and expanding instead of just suddenly snapping.

[PauliCZ44]

Here is my fix for this issue through css. It works thanks to max-height. See details here: http://css3.bradshawenterprises.com/animating_height/

/* FIX for matblazor accordion animation */
.mat-accordion .mat-expansion-panel > .mat-expansion-panel__content,
.mat-accordion .mat-expansion-panel .mat-expansion-panel__actions {
    display: block;
    max-height: 0px;
    transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.mat-accordion .mat-expansion-panel:not(.mat-expansion-panel--expanded) > .mat-expansion-panel__content,
.mat-accordion .mat-expansion-panel:not(.mat-expansion-panel--expanded) .mat-expansion-panel__actions {
    // In case there is a padding for the content box, we have to disable it.
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mat-accordion .mat-expansion-panel.mat-expansion-panel--expanded > .mat-expansion-panel__content,
.mat-accordion .mat-expansion-panel.mat-expansion-panel--expanded .mat-expansion-panel__actions {
    height: 100%;
    max-height: 3000px;
}