ionic list加载淡出淡入效果

Posted 2022-04-23 amanda-man

test.ts

import trigger, style, animate, transition from ‘@angular/animations‘;

@Component(
    selector: ‘booking‘,
    templateUrl: ‘./booking.html‘,
    styleUrls: [‘./booking.scss‘],
    animations: [
        trigger(
            ‘enterAnimation‘, [
                transition(‘:enter‘, [
                    style(opacity: 0),
                    animate(‘500ms‘, style(opacity: 1))
                ]),
                transition(‘:leave‘, [
                    // style(opacity: 1),
                    // animate(‘100ms‘, style(opacity: 0))
                ])
            ]
        )
    ]
)

　　test.html

<ion-list *ngFor="let item of bookingList"  [@enterAnimation]>
</ion-list>