如何淡化离子列表中的内容？

如何解决如何淡化离子列表中的内容？

起亚·奥拉（Kia Ora），我正在尝试找到一种方法，以便随着用户在离子列表中滚动而逐渐淡入和淡出卡片，以便当他们的卡片完全位于窗口中时，它会非常清晰，但当他们向上滑动时，它会变灰或淡出。谢谢！

HTML

FirebaseUser.isEmailVerified()

SCSS

    <ion-list>
      <ion-item style="background-color: #f0f4f9; padding:0 !important; margin-top: 0; " *ngFor="let item of cards">
        <div style="width: 100%; height:400px; border-radius: 25px; margin-bottom: 20px; "
          [ngStyle]="{'background':'url('+ item.image +')','background-size':'100% auto'} ">
          <ion-col>
            <ion-item style="margin-top:calc(100% - 50px); padding-left: 10px; width:100%"
              (click)="openandHideDetail(item)">
              <ion-label>
                <h1 text-start>{{item.name}},<span>{{item.age}}</span></h1>
                <div class="sameLineContent">
                  <ion-icon slot="start" name="sNow" expand="icon-only" mode="ios"></ion-icon>
                  <p text-start>{{item.occupation}}</p>
                </div>
                <div class="sameLineContent">
                  <ion-icon slot="start" name="pin" expand="icon-only" mode="ios"></ion-icon>
                  <p text-start>{{item.distance}}</p>
                </div>
              </ion-label>
              <ion-icon name="information-circle" slot="end" expand="icon-only" color="light" class="info"></ion-icon>
            </ion-item>
          </ion-col>
        </div>
      </ion-item>
    </ion-list>

    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-content>