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

Stack Overflow用户

提问于 2018-08-08 23:39:50

回答 1查看 30关注 0票数 1

我已经创建了一个页面，其中隐藏了一组用户可以选择的颜色。当用户单击或点击“聊天颜色”时，群组就会变得可见，并带有一个向下滑动群组的动画。然而，动画显示了组在其他内容上的滑动。

这是我的动画CSS：

.slideDown {
    animation-name: slideDown;
    -webkit-animation-name: slideDown;

    animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

    visibility: visible !important;
    z-index: -1000 //TRIED CHANGING Z-INDEX
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    50%{
        transform: translateY(8%);
    }
    65%{
        transform: translateY(-4%);
    }
    80%{
        transform: translateY(4%);
    }
    95%{
        transform: translateY(-2%);
    }
    100% {
        transform: translateY(0%);
    }
}

当我的动画没有覆盖其他内容时，我如何才能保留动画，而只显示组？

我已经创建了一个StackBlitz for this issue。

ionic-framework

css

angular

animation

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-09 01:28:11

您可以尝试将.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>