19

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

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

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

我记得当我使用 Angular 1 时，不需要position: absolute添加<div ui-view><div>

Angular 2 或 4 有可能吗？

4

2 回答 2

6

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

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;}']
于 2017-05-14T12:45:37.327 回答
3

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

您想从@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 属性（您不需要使用 afixed或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

于 2017-07-31T12:02:48.107 回答