I have 2 card sections side by side using flex box. Each box has a toggle to 'expand'(e.g. if I expand the right, it just hides the left card section and vice versa). I basically want to animate the expanding card but I dont know how to, or if it's possible.
<mdl-card *ngIf="hideLeft" [@leftAnimation] class="card-left" mdl-shadow="2" mdl-card-expand>
<mdl-card-title>
<h2 mdl-card-title-text>Left</h2>
</mdl-card-title>
<div class="cr-cardcontainer">
</div>
<mdl-card-menu>
<button mdl-button mdl-button-type="icon" mdl-ripple (click)="toggleRight()">
<mdl-icon>fullscreen</mdl-icon>
</button>
</mdl-card-menu>
</mdl-card>
<mdl-card *ngIf="hideRight" [@rightAnimation] [@test]="rightState" class="card-right" mdl-shadow="2" mdl-card-expand>
<mdl-card-title>
<h2 mdl-card-title-text>Right</h2>
</mdl-card-title>
<div class="cr-cardcontainer">
</div>
<mdl-card-menu>
<button mdl-button mdl-button-type="icon" mdl-ripple (click)="toggleLeft()">
<mdl-icon>fullscreen</mdl-icon>
</button>
</mdl-card-menu>
</mdl-card>
</mdl-layout-content>