Question

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

@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

无论如何，＆＃34;动画＆＃34;可以使用像styleUrls＆amp; amp; templateUrl上面？我曾经看到有人把它称为const，但是想知道是否有一位＆＃39; Angular官员＆＃39;方式。

Answer 1

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

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

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

Answer 2

摘自文档：

创建可重复使用的动画

要创建可重复使用的动画，请使用animation（）方法定义一个   动画在单独的.ts文件中   并将此动画定义声明为const导出变量。您   然后可以在您的任何应用程序组件中导入和重用此动画   使用useAnimation（）API。
*src/app/animations.ts*

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

export const transAnimation = animation([
  style({
    height: '{{ height }}',
    opacity: '{{ opacity }}',
    backgroundColor: '{{ backgroundColor }}'
  }),
  animate('{{ time }}')
]);
在上面的代码片段中，transAnimation可通过以下方式重用：   将其声明为导出变量。


注意：高度，不透明度，backgroundColor和时间输入为     在运行时替换。


您可以在组件中导入可重复使用的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'
          }
        })
      ])
    ])
  ],
})

引自：https://angular.io/guide/reusable-animations

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

2 个答案: