Javascript 角度动画作为一个单独的文件，不在线条中

我一直在摆弄，想知道是否有一个最好的/推荐的方法来避免内联样式。。。比如说,

@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这样的引用？我见过有人把它称为常量，但我想知道是否有“角度官方”的方法。

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

// 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
    ]
})

---

摘自文件：

创建可重用动画

要创建可重用的动画，请使用animation（）方法定义 单独的.ts文件中的动画 并将此动画定义声明为常量导出变量。你 然后可以在任何应用程序组件中导入并重用此动画 使用useAnimation（）API

在上面的代码片段中，通过 将其声明为导出变量

注：高度、不透明度、背景颜色和时间输入为 在运行时被替换

您可以在组件中导入可重用的transAnimation变量 使用useAnimation（）方法初始化并重用它，如下所示

*src/app/open-close.component.ts*

import { Component } from '@angular/core';
import { useAnimation, transition, trigger, style, animate } from '@angular/animations';
import { transAnimation } from './animations';

@Component({
    trigger('openClose', [
      transition('open => closed', [
        useAnimation(transAnimation, {
          params: {
            height: 0,
            opacity: 1,
            backgroundColor: 'red',
            time: '1s'
          }
        })
      ])
    ])
  ],
})

---

引用自：

您是否尝试在

.scss

中包含

转换

？是否可以在应用程序模块中导入？我试着去做，但失败了。因此，我不必在每个文件中导入它，我要进行转换。

*src/app/open-close.component.ts*

import { Component } from '@angular/core';
import { useAnimation, transition, trigger, style, animate } from '@angular/animations';
import { transAnimation } from './animations';

@Component({
    trigger('openClose', [
      transition('open => closed', [
        useAnimation(transAnimation, {
          params: {
            height: 0,
            opacity: 1,
            backgroundColor: 'red',
            time: '1s'
          }
        })
      ])
    ])
  ],
})