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 }))
        ]),
    ]);

对于其他动画和现场演示，您可以查看this post

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;'
    },
})

动画按组件工作，因此您需要在两者中声明动画。

状态更改时可能不会注意到离开动画。官方文档在how to use animations in route components

上有一个示例

希望它有所帮助！

我如何在Angular2中为Router Compoenents使用动画

2 个答案: