特定项目的角度页面过渡动画答案

【问题标题】：Angular page transition animation of specific items特定项目的角度页面过渡动画
【发布时间】：2018-09-01 05:23:45
【问题描述】：

我想做路线转换，但不是简单的滑出/滑入动画。我正在寻找像左边这样的动画（https://cdn.dribbble.com/users/495792/screenshots/3847874/allshots3.gif）

我知道如何为将重绘整个内容的路线设置动画。但是如何通过改变路线实现一个/多个组件到另一个组件的过渡效果（左侧的放大/缩放效果）。

我将不胜感激在哪里寻找一些示例代码的任何建议或指导。

【问题讨论】：

您可以创建具有所需enter 和leave 效果的自定义动画，并将其添加到每个需要动画的元素中。我想知道 Angular 是否会等待动画完成，然后再转换到下一条路线。

标签： angular angular-routing angular-router angular-animations angular-transitions

【解决方案1】：

您应该阅读可路由动画。查看 Matias Niemelä（负责@angular/animations）的这篇博文。

new-wave-of-animation-features

TL;DR:

<!-- app.html -->
<div [@routeAnimation]="prepRouteState(routerOutlet)">
    <!-- make sure to keep the ="outlet" part -->
  <router-outlet #routerOutlet="outlet"></router-outlet>
<div>


// app.ts
@Component({
  animations: [
    trigger('routeAnimation', [
      // no need to animate anything on load
      transition(':enter', []),
      // but anytime a route changes let's animate!
      transition('homePage => supportPage', [
        // ... some awesome animation here
      ]),
      // and when we go back home
      transition('supportPage => homePage', [
        // ... some awesome animation here
      ])
    ])
  ] 
})
class AppComponent {
  prepRouteState(outlet: any) {
    return outlet.activatedRouteData['animation'] || 'firstPage'; 
  }
}

<!-- app-routing.module.ts -->
const ROUTES = [
  { path: '',
    component: HomePageComponent,
    data: {
      animation: 'homePage'
    }
  },
  { path: 'support',
    component: SupportPageComponent,
    data: {
      animation: 'supportPage'
    }
  }
]

【讨论】：