目的:我想在从一个页面点击到另一个页面时添加一个漂亮的过渡效果
我在网上尝试了很多解决方案,包括:
- Angular 2 — Animating Router transitions
- Page transition animations with Angular 2.0 router and component interface promises
- ....
一个共同点是它们都具有类似 position: absolute
的样式或 position: fixed
添加,这打破了我现有的应用程序布局。
我记得当我使用 Angular 1 时,不需要添加 position: absolute
至 <div ui-view><div>
在 Angular 2 或 4 中是否可行?
最佳答案
您可以将绝对定位专门添加到离开动画中。
transition(':enter', [
style({transform: 'translateX(100%)'}),
animate('0.3s ease-in-out', style({transform: 'translateX(0%)'}))
]),
transition(':leave', [
style({transform: 'translateX(0%)', position: 'absolute', left: 0, right: 0, top: 0}),
animate('0.3s ease-in-out', style({transform: 'translateX(-100%)'}))
])
所以只有离开路由是绝对定位的,而进入路由是静态定位的。
如果它不起作用,请确保您的路由器导出被 position: relative 包裹
<div style="position: relative;">
<router-outlet></router-outlet>
</div>
并且你的路由组件有 display: block
@Component({
styles:[':host {display: block;}']
关于animation - Angular 动画 : Page transition without style `position: absolute` ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42088578/