Angular 5: 路由时淡入淡出动画(CSS)
Angular 5: fade animation during routing (CSS)
我有 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 }))
], { optional: true }),
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';
}
这很好用,除了页面转换分两步发生(顺序):
- 第 1 页消失(300 毫秒)
- 然后第 2 页出现(300 毫秒)
我想要的是 page1 的消失应该在 page2 出现的同时发生,转换应该同时发生。
问题:
我想阻止第 1 页或第 2 页内容的临时调整。
解释:
当使用 group() 动画使它们同时出现-消失并临时将位置设置为 'absolute' 时,内容会调整大小(因为内容的宽度为 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 }))
]),
]);
我终于成功了:
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 }
)
])
])
]);
这个 CSS 选择器成功了:
/deep/ router-outlet~* {
position: absolute;
width: 100%;
height: 100%;
}
因为我使用的是页脚,绝对位置并不理想。这是我所做的:
// animation.ts
export const fadeAnimation =
trigger('fadeAnimation', [
transition('* => *', [
query(':enter',
[
/* Modified the css here so to push the new element on top while its transitioning */
style({opacity: 0, position: 'absolute', top: 0, left: 0, width: '100vw', background:'#fff', height: '100vh', 'z-index' : 10})
],
{optional: true}
),
query(':leave',
[
style({opacity: 1}),
animate('0.5s', style({opacity: 0}))
],
{optional: true}
),
query(':enter',
[
style({opacity: 0}),
animate('0.5s', style({opacity: 1}))
],
{optional: true}
)
])
]);
// mystyle.scsss
:host {
main {
position: relative;
}
}
我只使用 CSS 在路由期间创建淡入淡出动画,如下所示:
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
router-outlet + * {
display: block; /* Change display inline to block */
animation: fade 1s;
}
注意:我用的是全局样式,大家可以多用类隔离一下。
我有 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 }))
], { optional: true }),
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';
}
这很好用,除了页面转换分两步发生(顺序):
- 第 1 页消失(300 毫秒)
- 然后第 2 页出现(300 毫秒)
我想要的是 page1 的消失应该在 page2 出现的同时发生,转换应该同时发生。
问题:
我想阻止第 1 页或第 2 页内容的临时调整。
解释:
当使用 group() 动画使它们同时出现-消失并临时将位置设置为 'absolute' 时,内容会调整大小(因为内容的宽度为 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 }))
]),
]);
我终于成功了:
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 }
)
])
])
]);
这个 CSS 选择器成功了:
/deep/ router-outlet~* {
position: absolute;
width: 100%;
height: 100%;
}
因为我使用的是页脚,绝对位置并不理想。这是我所做的:
// animation.ts
export const fadeAnimation =
trigger('fadeAnimation', [
transition('* => *', [
query(':enter',
[
/* Modified the css here so to push the new element on top while its transitioning */
style({opacity: 0, position: 'absolute', top: 0, left: 0, width: '100vw', background:'#fff', height: '100vh', 'z-index' : 10})
],
{optional: true}
),
query(':leave',
[
style({opacity: 1}),
animate('0.5s', style({opacity: 0}))
],
{optional: true}
),
query(':enter',
[
style({opacity: 0}),
animate('0.5s', style({opacity: 1}))
],
{optional: true}
)
])
]);
// mystyle.scsss
:host {
main {
position: relative;
}
}
我只使用 CSS 在路由期间创建淡入淡出动画,如下所示:
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
router-outlet + * {
display: block; /* Change display inline to block */
animation: fade 1s;
}
注意:我用的是全局样式,大家可以多用类隔离一下。