Question

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

我已阅读此tutorial 如何制作动画，它运作良好，但它是一个基于组件。这意味着我需要将动画放在每个组件中。

我也把它放在app组件上，但什么也没做。

有没有办法在路由器这样的地方做到这一点？我正在使用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>

有了这个和生命周期，你可以更新状态并玩它;角动画有点复杂，因为大的配置，但正因为如此，它们是如此强大。

修改使用后：

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';

使用ui路由器的2/5页动画角度

1 个答案: