0

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Magikarp
  • 492
  • 6
  • 19
  • Since you have animations set up, why don't you just use the width property ? –  Nov 08 '17 at 10:14
  • The thing is, the width isnt set, so I dont know what to set it as since I have the container set as display:flex – Magikarp Nov 08 '17 at 11:15
  • If the container is in flex, then your card should have the `flex: 1 1 auto` properties. You just have to change them to `flex: 1 1 0` and `flex: 1 1 100%` to suit your needs ! –  Nov 08 '17 at 11:20
  • Thank you so much triche, it works perfect! – Magikarp Nov 08 '17 at 12:48
  • Well no problem, let me answer so that you can mark it as resolved ! –  Nov 08 '17 at 12:50

1 Answers1

0

Following my comment, if your container use the flex display, your cards can use the flex property like so :

flex: 1 1 0; // No width
flex: 1 1 100%; // Full width