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>

  

posted @ 2019-07-18 18:46  Tiramisu.man  阅读(250)  评论(0编辑  收藏  举报