[英]Angular 6 Router Transition Animation doesn't work (Nav bar)
I am trying to implement Fade transition on my router outlet - whenever you move to a page you get fadein/out. 我正在尝试在路由器插座上实现淡入淡出过渡-每当您移至页面时,您就会淡入/淡出。
However it just doesn't seem to work at all, the router outlet is in the main area of the navigation bar: Stackblitz of my app 但是,它似乎根本不起作用,路由器出口位于导航栏的主要区域: 我的应用程序的Stackblitz
See "fadeIn.ts" for the animation See "app.nav-component" html/ts and app module for implementation 有关动画,请参见“ fadeIn.ts”。有关实现,请参见“ app.nav-component” html / ts和应用模块
I would expect when clicking a link in the navigation the animation of transition would trigger. 我希望单击导航中的链接时会触发过渡动画。
I modified your fadeIn.ts a bit. 我对您的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 }),
])
])
]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.