CSS 动画扩展组件
CSS animate expanding component
我使用 flex box 并排放置了 2 个卡片部分。每个框都有一个 'expand' 的切换开关(例如,如果我展开右侧,它只会隐藏左侧的卡片部分,反之亦然)。我基本上想为扩展卡制作动画,但我不知道该怎么做,或者是否可能。
<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>
根据我的评论,如果您的容器使用 flex 显示,您的卡片可以像这样使用 flex 属性:
flex: 1 1 0; // No width
flex: 1 1 100%; // Full width
我使用 flex box 并排放置了 2 个卡片部分。每个框都有一个 'expand' 的切换开关(例如,如果我展开右侧,它只会隐藏左侧的卡片部分,反之亦然)。我基本上想为扩展卡制作动画,但我不知道该怎么做,或者是否可能。
<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>
根据我的评论,如果您的容器使用 flex 显示,您的卡片可以像这样使用 flex 属性:
flex: 1 1 0; // No width
flex: 1 1 100%; // Full width