CSS 动画扩展组件答案

【问题标题】：CSS animate expanding componentCSS 动画扩展组件
【发布时间】：2017-11-08 20:50:56
【问题描述】：

我有 2 个卡片部分并排使用弹性盒子。每个框都有一个“展开”开关（例如，如果我展开右边，它只会隐藏左边的卡片部分，反之亦然）。我基本上想为扩展卡制作动画，但我不知道如何做，或者是否可能。

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

【问题讨论】：

既然你已经设置了动画，为什么不直接使用width属性呢？
问题是，宽度没有设置，所以我不知道如何设置它，因为我将容器设置为 display:flex
如果容器是 flex 的，那么你的卡片应该有 flex: 1 1 auto 属性。您只需将它们更改为 flex: 1 1 0 和 flex: 1 1 100% 即可满足您的需求！
非常感谢 triche，效果很好！
好吧，没问题，让我回答，以便您将其标记为已解决！

标签： css angular flexbox css-animations angular-animations

【解决方案1】：

根据我的评论，如果您的容器使用 flex 显示，您的卡片可以像这样使用 flex 属性：

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

【讨论】：