Transition on mat-card height

Question

Using Angular Material (version 10), I would like to animate a mat-card so that it vertically expands to its full height when the page loads.

I have tried some tests just with the hover event (if this works, I will then work on how to apply the transition upon page load - this is another story), with the following CSS:

.test-anim {
  height: 0!important;
  transition: height 2s ease !important;
  &:hover {
    height: 100% !important;
  }
}

<mat-card class="test-anim">
  [some content...]
</mat-card>

Unfortunately this does not work:

1. when I hover the mat-card, the card expends directly from 0 to 100%, but with no transition at all. And btw, when I try to set the height manually from Chrome Developer Tools, I realize that any intermediate percentage (e.g. 50%) seems to be taken as 100%. Only 0% makes a difference with 100%. (However, the animation works with opacity instead of height, and replacing 100% with 1).

2. I cannot use px values in the transition, because the actual height of the mat-card could vary depending on the data being displayed.

3. even though I would use px values for the transition, it would still not fully work: when I manually set the height in pixels (eg '30px') from Chrome Developer Tools, the card itself is actually sized properly, BUT its content is displayed outside of the card (I would have expected some kind of clipping of the mat-card content, by the mat-card itself).

Could you please help me? Many thanks!

Answer 1

I think it would be easier for you to take the benefit of the Angular's animation API.

What you need to do is:

1. Set the height of the mat-card to 100% (or flex:1, or something else based on your parent / requirements).
2. Define the animation on your component
3. Apply the animation to the HTML element you want to (e.g. mat-card)
4. Trigger the animation.

Here is a working stackblitz I've forked from mat-card documentation and to which I've added animation.

To expand upon it:

Add class to the element:

<mat-card class="example-card">

Define the class:

 .example-card {
   height: 100%;
 }

Define the animation:

@Component({
  selector: 'card-fancy-example',
  templateUrl: 'card-fancy-example.html',
  styleUrls: ['card-fancy-example.css'],
  animations: [
    trigger('bodyExpansion', [
      state('collapsed, void', style({ height: '0px', visibility: 'hidden', overflow: 'hidden' })),
      state('expanded', style({ height: '*', visibility: 'visible', overflow: '*' })),
      transition(
        'expanded <=> collapsed, void => collapsed, void => expanded',
        animate('1000ms cubic-bezier(0.4, 0.0, 0.2, 1)')
      ),
    ]),
  ],
})

Apply the animation to html element:

<mat-card class="example-card" [@bodyExpansion]="state">

Define the state variable and update it "after page loads" (I've used after content init, might mean something else to you).

  state: 'expanded' | 'collapsed' = 'collapsed';

  ngAfterContentInit(): void {
    this.state = 'expanded';
  }

And basically that's it. You should understand it after you fully read the whole documentation I've linked.