角度动画:没有样式`position:absolute`的页面转换？

Question

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

---

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

• Angular 2 - 动画路由器转换
• 使用Angular 2.0路由器和组件接口承诺的页面转换动画
• ....

一个共同点是它们都有类似position: absolute或position: fixed添加的样式,这打破了我现有的应用程序布局.

在使用角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%)'}))
])

所以只有离开路线是绝对定位的，而进入路线是静态定位的。

如果它不起作用，请确保您的路由器插座按位置包裹：相对

<div style="position: relative;">
  <router-outlet></router-outlet>
</div>

并且您的路由组件具有 display: block

@Component({
  styles:[':host {display: block;}']