角动画作为单独的文件没有内联

Question

我一直在摆弄Angular动画,并想知道是否有最佳/推荐的方法来避免内联样式...例如,

@Component({
selector: 'page-that-needs-anime',
templateUrl: './anime.component.html',
styleUrls: ['./anime.component.scss'],
animations: [
trigger('animeTrigger', [
state('in', style({transform: 'translateY(0)'})),
transition('void => *', [
  animate(700, keyframes([
    style({opacity: 0, transform: 'translateY(-100%)', offset: 0}),
    style({opacity: 1, transform: 'translateY(25px)',  offset: 0.3}),
    style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
  ]))
]) //you get the idea ... *Import statement is taken out for brevity

无论如何,"动画"可以使用类似styleUrls&templateUrl的引用吗？我见过有人把它称为const但是想知道是否有'Angular官方'方式.

Answer 1

您可以将动画保存在单独的文件中.

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

export const Animations = {
    animeTrigger: trigger('animeTrigger', [
        state('in', style({transform: 'translateY(0)'})),
        transition('void => *', [
        animate(700, keyframes([
            style({opacity: 0, transform: 'translateY(-100%)', offset: 0}),
            style({opacity: 1, transform: 'translateY(25px)',  offset: 0.3}),
            style({opacity: 1, transform: 'translateY(0)',     offset: 1.0}) 
        ]))
    ])

}

零件

import { Animations } from './animations'

@Component({
    selector: 'page-that-needs-anime',
    templateUrl: './anime.component.html',
    styleUrls: ['./anime.component.scss'],
    animations: [
        Animations.animeTrigger
    ]
})