我如何在 Angular2 中为路由器组件使用动画

Question

我想在活动路由器链接更改时为我的组件设置动画。 我如何编写动画代码，以便当路由器更改时，一个组件淡出然后另一个淡入？

我一直在尝试的代码如下。

@Component({
  selector: 'app-component',
  templateUrl: './component.component.html',
  animations: [trigger(
    'openClose',
    [
      transition(":enter", [
        style({ opacity: 0 }),
        animate('2000ms', style({ opacity: 1 }))
      ]),
      transition(":leave", [
        animate('2000ms', style({ opacity: 0 }))
      ])
    ])]
})

但我认为我的概念是错误的，因为我试图在至少 2 个组件中使用那段代码，但它们都没有淡入或淡出。

这可能与此功能有关还是我以错误的方式解决问题？

Answer 1

Angular 4 示例

这是我在我的家庭组件路线上实现淡入动画的方法

import { Component } from '@angular/core';

import { fadeInAnimation } from '../_animations/index';

@Component({
    moduleId: module.id.toString(),
    templateUrl: 'home.component.html',
    animations: [fadeInAnimation],
    host: { '[@fadeInAnimation]': '' }
})

export class HomeComponent {
}

这是在单独文件中定义的动画

import { trigger, state, animate, transition, style } from '@angular/animations';

export const fadeInAnimation =
    trigger('fadeInAnimation', [
        // route 'enter' transition
        transition(':enter', [

            // styles at start of transition
            style({ opacity: 0 }),

            // animation and styles at end of transition
            animate('.3s', style({ opacity: 1 }))
        ]),
    ]);

对于其他动画和现场演示，您可以查看这篇文章

Answer 2

你的代码对我来说似乎是正确的，你只需要将动画绑定到一个组件。 有两种方式：

将其添加到您的模板中，例如添加到 div：

<div class="container" [@openClose]="'true'">
   ...
</div>

或者直接将它应用到你的主机组件（ <app-component> ）：

  @Component({
  selector: 'app-component',
  templateUrl: './component.component.html',
  animations: [trigger(
    'openClose',
    [
      transition(":enter", [
        style({ opacity: 0 }),
        animate('2000ms', style({ opacity: 1 }))
      ]),
      transition(":leave", [
        animate('2000ms', style({ opacity: 0 }))
      ])
    ])],
    host: {
        '[@openClose]': 'true',
        'style': 'display: block;'
    },
})

动画由组件工作，因此您需要在它们两个上声明动画。

状态更改时可能不会注意到离开动画。 官方文档有一个例子说明如何在路由组件中使用动画

希望能帮助到你！