角度动画：没有样式`位置：绝对`的页面过渡？答案

【问题标题】：Angular Animation: Page transition without style `position: absolute`?角度动画：没有样式`位置：绝对`的页面过渡？
【发布时间】：2017-02-07 11:22:17
【问题描述】：

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

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

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

我记得当我使用 Angular 1 时，没有必要将 position: absolute 添加到 <div ui-view><div>

在 Angular 2 或 4 中是否可行？

【问题讨论】：

您能找到解决方案吗？
您需要绝对位置/固定位置，否则当另一个屏幕出现时，它们将紧挨着另一个。虽然您需要它们在相同的坐标上相互覆盖。在我的例子中，我重写了我的网络应用程序的 CSS 以允许绝对定位的路线而不会破坏布局。
截至今天，我也在为此苦苦挣扎。我们似乎必须添加position: fixed 或position: absolute 的事实对我来说似乎真的很愚蠢而且一点也不聪明。我真的希望 Angular 团队比这更好。必须有另一种方式。我的评论根本没有帮助，对不起。如果在我之前没有人这样做，我会尝试找出一些东西并将其发布在此处。
正如@MartinNuc 评论的那样，如果需要滑动路线动画，目前（4.3.6）的一种实用解决方案似乎是从flex 移动到fixed 布局。
@lkartono fixed 和 absolute 定位不是 Angular 的事情。如果它们是relative/static，那么它们就不能重叠——这是普通的 HTML 事物。动画无法控制这一点。不过有一些选项 - 您可以绑定页面 position 样式并在过渡开始/结束时更新它们 - 这样它们在过渡时只有 absolute，当动画结束时返回到 relative

标签： angular animation transition angular4

【解决方案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;}']

【讨论】：

【解决方案2】：

谈论 Angular 4.3.x 版本。阅读routerdocumentation，他们解释了如何在路线之间添加动画。这是给懒人（包括我自己）的简历。

您想从@angular/core（而不是@angular/animations）导入动画库：

import {
  AnimationEntryMetadata,
  animate,
  state,
  style,
  trigger
} from '@angular/core';

export const fadeInAnimation: AnimationEntryMetadata = trigger('fadeInAnimation', [
  transition(':enter', [
    style({
      opacity: 0,
      transform: 'translateY(20px)'
    }),
    animate(
      '.3s',
      style({
        opacity: 1,
        transform: 'translateY(0)'
      })
    )
  ])
]);

然后在您的组件中，使用 HostBinding 装饰器来指定组件的布局 css 属性（您不需要使用 fixed 或 absolute 位置）：

import { Component, OnInit, HostBinding } from '@angular/core';

import { fadeInAnimation } from './../animations/fadein';

@Component({
  animations: [fadeInAnimation],
  selector: 'app-posts',
  templateUrl: './posts.component.html'
})
export class DemandsComponent implements OnInit {
  @HostBinding('@fadeInAnimation') fadeInAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'relative';

  // Rest of the code
}

将此添加到每个路由组件可能很麻烦。文档建议，我引用：

将路线动画应用于单个组件适用于一个简单的演示，但在现实生活中的应用程序中，最好根据路线路径为路线设置动画。

这篇来自 Matias Niemelä 的文章可以帮助https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#routable-animations

【讨论】：

@angular/core 的动画库似乎已被弃用。