ionic list加载淡出淡入效果

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>

  

猜你喜欢

转载自www.cnblogs.com/amanda-man/p/11209283.html