我正试图在我的路由器插座上实现淡入淡出过渡 - 每当你移动到一个页面,你就会得到淡入/淡出。
然而,它似乎根本不起作用,路由器插座位于导航栏的主要区域:Stackblitz of my app
请参阅动画的“fadeIn.ts”有关实现,请参阅“app.nav-component”html / ts和app模块
我希望当单击导航中的链接时,将触发转换动画。
我稍微修改了你的fadeIn.ts。
import {
trigger,
animate,
transition,
style,
query, group
} from '@angular/animations';
export const fadeAnimation = trigger('fadeAnimation', [
transition('* <=> *', [
/* order */
/* 1 */ query(':enter, :leave', style({ position: 'fixed', width: '100%' })
, { optional: true }),
/* 2 */ group([ // block executes in parallel
query(':enter', [
style({ transform: 'translateX(100%)' }),
animate('0.3s ease-in-out', style({ transform: 'translateX(0%)' }))
], { optional: true }),
query(':leave', [
style({ transform: 'translateX(0%)' }),
animate('0.3s ease-in-out', style({ transform: 'translateX(-100%)' }
))], { optional: true }),
])
])
]);