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

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

对于其他动画和现场演示,您可以查看此帖子