animation - Angular 动画 : Page transition without style `position: absolute` ?

Question

目的:我想在从一个页面点击到另一个页面时添加一个漂亮的过渡效果

---

我在网上尝试了很多解决方案，包括:

• 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 中是否可行？

Answer 1

您可以将绝对定位专门添加到离开动画中。

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;}']