angular 2/5 页动画与 ui 路由器

Question

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

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

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

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

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 动画，条件是将它添加到当前或根模块：

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

并将动画添加到组件中：

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

angular 2/5 页动画与 ui 路由器

angular 2/5 page animation with ui router

javascript

animation

angular-ui-router