Angular 5:路由过程中的淡入淡出动画(CSS)
发布时间:2020-12-17 17:36:47 所属栏目:安全 来源:网络整理
导读:我有2条路线: export const appRoutes: Route[] = [{ path: 'page1',component: Page1Component,data: { animation: 'page1' } },{ path: 'page2',component: Page2Component,data: { animation: 'page2' } },]; 我的路线动画: export const routeStateTri
我有2条路线:
export const appRoutes: Route[] = [ { path: 'page1',component: Page1Component,data: { animation: 'page1' } },{ path: 'page2',component: Page2Component,data: { animation: 'page2' } },]; 我的路线动画: export const routeStateTrigger = trigger('routeState',[ transition('* => *',[ query(':enter',[ style({ position: 'absolute',opacity: 0 }) ],{ optional: true }),query(':leave',[ animate(300,style({ opacity: 0 })) ],query(':enter',[ style({ position: 'relative',opacity: 0 }),animate(300,style({ display: 'visible',opacity: 1 })) ],{ optional: true }) ]) ]); 我的路由器插座: <div [@routeState]="getAnimationData(routerOutlet)"> <router-outlet #routerOutlet="outlet"></router-outlet> </div> 和getAnimationData方法: getAnimationData(routerOutlet: RouterOutlet) { const routeData = routerOutlet.activatedRouteData['animation']; return routeData ? routeData : 'rootPage'; } 这很有效,除了页面转换分两步发生(顺序): > page1消失(300毫秒) 我想要的是page1的消失应该在page2出现的同时发生,转换应该同时发生. 问题: 我想阻止page1或page2的内容的TEMPORARY RESIZING. 说明: 当使用group()进行动画制作以使它们同时消失并将位置暂时设置为“绝对”时,内容会调整大小(因为内容宽度为100%,当容器大小更改时内容也会发生变化). 我试过玩z-index: position: 'relative','z-index': 1 但这不起作用,它仍在堆叠进入页面下面的页面. 有一个很好的解决方案吗? 解决方法
尝试这个简单的过渡.
export const routeStateTrigger = // trigger name for attaching this animation to an element using the [@triggerName] syntax trigger('routeState',[ // route 'enter and leave (<=>)' transition transition('*<=>*',[ // css styles at start of transition style({ opacity: 0 }),// animation and styles at end of transition animate('0.4s',style({ opacity: 1 })) ]),]); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |