Question

我创建了一个页面，该页面隐藏了用户可以选择的一组颜色。当用户单击或点击“聊天颜色”时，该组将以向下滑动该组的动画显示。但是，动画显示该组在其他内容上向下滑动。

这是我的动画CSS：

start.sh

如何保留动画，只在不超过其他内容的情况下显示组？

我创建了一个StackBlitz for this issue。

Answer 1

您可以尝试将.slideDown元素包装在隐藏的溢出中。

<div style="overflow: hidden">
<ion-grid *ngIf="colorsExpanded" [ngClass]="{'slideDown': colorsExpanded}">
  <ion-row>
    <ion-col class="coloroption" style="background: #7484ad" id="#7484ad" (click)="selectcolor($event)"><span *ngIf="selectedcolor == '#7484ad'" class="check">&#10003;</span></ion-col>
    <ion-col class="coloroption" style="background: #32db64" id="#32db64" (click)="selectcolor($event)"><span *ngIf="selectedcolor == '#32db64'" class="check">&#10003;</span></ion-col>
    <ion-col class="coloroption" style="background: #910d9b" id="#910d9b" (click)="selectcolor($event)"><span *ngIf="selectedcolor == '#910d9b'" class="check">&#10003;</span></ion-col>
    <ion-col class="coloroption" style="background: #b00908" id="#b00908" (click)="selectcolor($event)"><span *ngIf="selectedcolor == '#b00908'" class="check">&#10003;</span></ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="coloroption" style="background: #2bc6d1" id="#2bc6d1" (click)="selectcolor($event)"><span *ngIf="selectedcolor == '#2bc6d1'" class="check">&#10003;</span></ion-col>
    <ion-col class="coloroption" style="background: #216d0b" id="#216d0b" (click)="selectcolor($event)"><span *ngIf="selectedcolor == '#216d0b'" class="check">&#10003;</span></ion-col>
    <ion-col class="coloroption" style="background: #d88219" id="#d88219" (click)="selectcolor($event)"><span *ngIf="selectedcolor == '#d88219'" class="check">&#10003;</span></ion-col>
    <ion-col class="coloroption" style="background: #ed48c6" id="#ed48c6" (click)="selectcolor($event)"><span *ngIf="selectedcolor == '#ed48c6'" class="check">&#10003;</span></ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="coloroption" style="background: #0e0e49" id="#0e0e49" (click)="selectcolor($event)"><span *ngIf="selectedcolor == '#0e0e49'" class="check">&#10003;</span></ion-col>
    <ion-col class="coloroption" style="background: #5b5b5b" id="#5b5b5b" (click)="selectcolor($event)"><span *ngIf="selectedcolor == '#5b5b5b'" class="check">&#10003;</span></ion-col>
    <ion-col class="coloroption" style="background: #000000" id="#000000" (click)="selectcolor($event)"><span *ngIf="selectedcolor == '#000000'" class="check">&#10003;</span></ion-col>
    <ion-col class="coloroption" style="background: #1213dd" id="#1213dd" (click)="selectcolor($event)"><span *ngIf="selectedcolor == '#1213dd'" class="check">&#10003;</span></ion-col>
  </ion-row>
</ion-grid>
</div>

将动画内容隐藏在其他元素后面

1 个答案: