问题描述
我有两条路线:
export const appRoutes: Route[] = [{路径:'第1页',组件:Page1Component,数据: {动画:'page1'}},{路径:'第2页',组件:Page2Component,数据: {动画:'page2'}},];
我的路线动画:
export const routeStateTrigger = trigger('routeState', [过渡('* => *',[查询(':输入',[样式({位置:'绝对',不透明度:0})], { 可选: 真 }),查询(':离开',[动画(300,样式({不透明度:0}))], { 可选: 真 }),查询(':输入',[样式({位置:'相对',不透明度:0}),动画(300,样式({显示:'可见',不透明度:1}))], { 可选:true })])]);
我的路由器插座:
<router-outlet #routerOutlet="outlet"></router-outlet>
和 getAnimationData 方法:
getAnimationData(routerOutlet: RouterOutlet) {const routeData = routerOutlet.activatedRouteData['animation'];返回路由数据?路由数据:'rootPage';}
这很有效,除了页面转换发生在两个步骤中(顺序):
- page1 消失(300 毫秒)
- 然后第 2 页出现(300 毫秒)
我想要的是 page1 的消失应该在 page2 出现的同时发生,转换应该同时发生.
问题:
我想防止对 page1 或 page2 的内容进行临时调整.
说明:
当使用 group() 动画使它们同时出现-消失并将位置临时设置为绝对"时,内容将调整大小(因为内容宽度为 100%,并且当容器大小更改时,内容也会更改).
我试过玩 z-index :
position: 'relative', 'z-index': 1
但是那没有用,它仍然在离开页面下方堆叠进入页面.
有什么好的解决办法吗?
我终于成功了:
export const routeStateTrigger = trigger('routeState', [过渡('* => *',[查询(':输入',[样式({不透明度:0})], { 可选:真}),团体([查询(':离开',[动画(300,样式({不透明度:0}))],{ 可选:真}),查询(':输入',[样式({不透明度:0}),动画(300,样式({不透明度:1}))],{ 可选:真})])])]);
这个 CSS 选择器成功了:
/deep/router-outlet~* {位置:绝对;宽度:100%;高度:100%;}
I have 2 routes :
export const appRoutes: Route[] = [
{
path: 'page1',
component: Page1Component,
data: {
animation: 'page1'
}
},
{
path: 'page2',
component: Page2Component,
data: {
animation: 'page2'
}
},
];
My Route animation :
export const routeStateTrigger = trigger('routeState', [
transition('* => *', [
query(':enter', [
style({ position: 'absolute', opacity: 0 })
], { optional: true }),
query(':leave', [
animate(300, style({ opacity: 0 }))
], { optional: true }),
query(':enter', [
style({ position: 'relative', opacity: 0 }),
animate(300, style({ display: 'visible', opacity: 1 }))
], { optional: true })
])
]);
My router-outlet :
<div [@routeState]="getAnimationData(routerOutlet)">
<router-outlet #routerOutlet="outlet"></router-outlet>
</div>
and getAnimationData method :
getAnimationData(routerOutlet: RouterOutlet) {
const routeData = routerOutlet.activatedRouteData['animation'];
return routeData ? routeData : 'rootPage';
}
This works well, except page transition occurs in two steps (sequential) :
- page1 disappears (300 ms)
- AND THEN page2 appears (300 ms)
What I want is the disappearing of page1 should happen the same time page2 appears, the transitions should occur simultaneously.
Problem :
I want to prevent the TEMPORARY RESIZING of the content of page1 or page2.
Explanation :
When animating with group() to make them appear-disappear simultaneously AND setting the position temporarily to 'absolute' then the content resizes (because the content is width 100%, and when the container size changes the content changes as well).
I've tried playing with z-index :
position: 'relative', 'z-index': 1
but that didn't work, it's still stacking entering page below leaving page.
Is there a good solution to this ?
I finally made it work :
export const routeStateTrigger = trigger('routeState', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
], { optional: true }
),
group([
query(':leave', [
animate(300, style({ opacity: 0 }))
],
{ optional: true }
),
query(':enter', [
style({ opacity: 0 }),
animate(300, style({ opacity: 1 }))
],
{ optional: true }
)
])
])
]);
This CSS selector did the trick :
/deep/ router-outlet~* {
position: absolute;
width: 100%;
height: 100%;
}
这篇关于Angular 5:路由期间的淡入淡出动画(CSS)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!