CSS动画扩展组件

Question

我有两个卡段并排使用挠性盒。每个框都有一个“展开”按钮(例如，如果我展开右边，它只隐藏左卡部分，反之亦然)。我基本上想要动画的扩展卡，但我不知道如何，或它是否可能。

<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>

Answer 1

在我的评论之后，如果您的容器使用了flex显示，您的卡片可以使用flex属性，如下所示：

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