基于角度(v2 +)的路径路径设置动画路线

Question

而不是将动画附加到正在路由到的每个组件,例如在此StackOverflow答案中,或者在官方文档的第一部分中.一个例子:

在hero-detail.component.ts:

import { Component, OnInit } from '@angular/core';
import { fadeInOutAnimation } from "app/app-routing.animation";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  animations: [
    fadeInOutAnimation(300)
  ]
})
export class HomeComponent{       

}

在app-routing.animation.ts:

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

export const fadeInOutAnimation = function (fadeInTimeMS) {
  return trigger('fadeInOut', [
    transition(':enter', [   // :enter is alias to 'void => *'
      style({ opacity: 0 }),
      animate(fadeInTimeMS, style({ opacity: 1 }))
    ]),
    transition(':leave', [   // :leave is alias to '* => void'
      animate(fadeInTimeMS, style({ opacity: 0 }))
    ])
  ])
}

我想基于路径路径为路线设置动画:

将路径动画应用于单个组件适用于简单演示,但在实际应用中,最好根据路径路径设置路径动画.

如角度文档中"将动画添加到路由组件"末尾所述.虽然它没有扩展如何做到这一点.

Answer 1

以下是根据路径更改转换的示例：

import {
    trigger,
    query,
    group,
    animate,
    transition,
    style
} from "@angular/animations";

const fade: any = [
    transition(':enter', [   // :enter is alias to 'void => *'
      style({ opacity: 0 }),
      animate(fadeInTimeMS, style({ opacity: 1 }))
    ]),
    transition(':leave', [   // :leave is alias to '* => void'
      animate(fadeInTimeMS, style({ opacity: 0 }))
    ])
];
const transition2: any = [
    //other transition
];

export const routerTransition = trigger('routerTransition', [
    transition('path1 => *', fade),
    transition('path2 => path3', fade),
    transition('path3 => path1', transition2),
    transition('* => path2', transition2),
]);

然后在组件中使用动画：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  animations: [
    routerTransition
  ]
})