javascript - 带 ui 路由器的 Angular 2/5 页面动画

Question

我尝试创建一个页面切换动画，但我找不到放置动画的位置。

我已阅读此 tutorial如何制作动画并且效果很好，但它是基于组件的。这意味着我需要将我的动画放在每个组件中。

我也把它放在了应用程序组件上，但是什么也没做。

有没有办法像在路由器中那样在一个地方完成它？
我正在使用 ui-router

Answer 1

您可以从@angular/animations 创建动画。

在@Component 中你可以声明它们，例如:

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

您必须设置和更新组件的状态，在您的情况下，是包装内容的更大的框或 div。

要将动画插入到组件中，您必须编写如下代码:

<div [@heroState]="hero.state">
    <!-- Component content -->
</div>

有了这个和生命周期，你可以更新状态并使用它； Angular 动画有点复杂，因为配置很大，但正因为如此，它们非常强大。

编辑:使用后:

npm install @angular/animations@latest --save

要使用 Angular Animations，条件是将其添加到当前或根模块:

@NgModule({
  ...
  imports: [
    // other modules removed for brevity
    BrowserAnimationsModule
  ],
})

并将动画添加到组件中:

import { trigger,style,transition,animate,keyframes,query,stagger } from '@angular/animations';