离子3动画同时显示隐藏

Question

我有一张离子卡，它几乎没有基于布尔值显示或隐藏的元素。

一切正常，但变化非常迅速，因此用户体验不佳。

离子卡看起来像：

    <ion-card>
                            <img *ngIf="item.showActions == false" class="img-card" src="{{item.imgUrl}}"/>
                            <ion-card-content>
                                <ion-card-title>{{item.msg}}</ion-card-title>
                            </ion-card-content>
                            <ion-grid *ngIf="item.showActions == true" no-padding style="border-top: 0.5px solid #E7E7E7;border-bottom: 1px solid #E7E7E7">
                                <ion-row padding><ion-col><p>For this news you can take following actions</p></ion-col></ion-row>
                                <ion-row text-center>
                                        <ion-col>
                                        <br/>
                                    <button ion-button clear small  icon-left (click)="presentPopover($event)">Show
                                    </button>
                                     <h2>Create Task</h2>
                                     <br/>
                                </ion-col>
                                </ion-row>
</ion-grid>
<ion-card>

所以 item.showActions 是一个布尔值，我根据一些动作翻转它。我希望这种过渡能够像翻转或淡出一样顺利进行。

Answer 1

您可以使用角度动画来做到这一点。淡入/淡出元素的示例：

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  animations: [
    trigger('visibilityChanged', [
      state('shown', style({ opacity: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('* => *', animate('500ms'))
    ])
  ]
})

export class HomePage {
  visibility: string = 'hidden';
  ...
}

在您的 HTML 中：

<div [@visibilityChanged]="visibility" style="opacity: 0">test</div>

更多信息可以在这里找到：https://angular.io/guide/animations