Question

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

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

一个共同点是，它们都添加了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%)'}))
])

因此，只有离开路线绝对定位，而进入路线静止定位。

如果不起作用，请确保路由器插座被位置包裹：relative

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

您的路线组件已显示：block

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

Answer 2

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

您要从@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
}

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

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

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

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

2 个答案: