1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import { trigger, state, transition, style, animate, keyframes, group, query, stagger } from '@angular/animations' ; export const listAnimation = trigger( 'listAnim' , [ transition( '* => *' , [ query( ':enter' , style({ opacity: 0 }), { optional: true }), query( ':enter' , stagger(100, [ animate( '1s' , style({ opacity: 1 })) ]), { optional: true }), query( ':leave' , style({ opacity: 1 }), { optional: true }), query( ':leave' , stagger(100, [ animate( '2s' , style({ opacity: 0 })) ]), { optional: true }), ]) ]); |
代码是这样的,没有过渡效果!
全网首个介绍官方 Material 组件库用法与 Redux 在 Angular 中的应用
了解课程