18

@Component注解为我们提供了一个属性animations。这可以用来定义一个triggers包含很多state和transition属性的列表。

当您向一个组件添加多个动画时，此列表可能会变得很长。此外，一些动画也可以很好地用于其他组件。必须将它们直接放在每个组件中似乎很乏味并且是重复的——而且它违反了 DRY 原则。

您也可以在组件上定义模板和样式属性，但在这里您可以选择提供templateUrlandstyleUrls来代替。我似乎找不到animationUrls房产 - 我错过了什么 - 有没有办法做到这一点？

4

4 回答 4

35

你当然可以。您可以在不同的文件中声明动画，然后将其导入您需要的地方

动画.ts

export const animation = trigger(...)

组件.ts

import { animation } from './animations'

@Component({
  animations: [ animation ]
})

或者，如果您想使其可配置，您可以导出一个函数。例如，看一下Fuel-UI Collapse。这是一个可重用（和可配置）的动画

崩溃.ts

export function Collapse(duration: number = 300) {
    return trigger('collapse', [
           ...
        ])
}

然后在您的组件中，只需使用

import { Collapse } from './collapse'

@Component({
  animations: [ Collapse(300) ],
  template: `
    <div @collapse="collapsed ? 'true' : 'false'">
    </div>
  `
})
class MyComponent {}
于 2016-11-02T08:39:57.733 回答
4

当然这是可能的。例如，您可以制作一个animations.ts并让它导出所有类型的动画常量：

export const PRETTY_ANIMATION = trigger('heroState', [
  state('inactive', style({
    backgroundColor: '#eee',
    transform: 'scale(1)'
  })),
  state('active',   style({
    backgroundColor: '#cfd8dc',
    transform: 'scale(1.1)'
  })),
  transition('inactive => active', animate('100ms ease-in')),
  transition('active => inactive', animate('100ms ease-out'))
])

import在您的组件中，您可以使用以下语句导入此动画：

import {PRETTY_ANIMATION} from 'animations';

并将其应用于您的组件：

@Component({
    selector : `...`
    animations : [PRETTY_ANIMATION]
})
于 2016-11-02T08:40:14.423 回答
1

你当然和先生们在他的一些 github repo 示例中这样做了。采取以下措施：

route_animations.ts

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

var startingStyles = (styles) => {
    styles['position'] = 'fixed';
    styles['top'] = 0;
    styles['left'] = 0;
    styles['right'] = 0;
    styles['height'] = '100%';
    return styles;
}

export default function(name) {
    return trigger(name, [
        transition('void => *', [
            style(startingStyles({
                transform: 'translateX(100%)'
            })),
            animate('0.5s ease-out', style({ transform: 'translateX(0%)'}))
        ]),
        transition('* => void', [
            style(startingStyles({
                transform: 'translateX(0%)'
            })),
            animate('0.5s ease-in', style({ transform: 'translateX(-100%)'}))
        ])
    ]);
}

然后将其导入到如下组件中：

import {default as routerAnimations} from '../route_animations';

然后在初始化组件时在动画Param下这样调用：

animations: [routerAnimations('route')],

自己看看这个以获得更好的主意，但我希望这会有所帮助。https://github.com/matsko/ng2eu-2016-code/blob/master

感谢matsko。

于 2016-11-02T08:43:39.787 回答
1

这是我用于动画路线的 Angular 4 中动画淡入淡出的另一个示例

// import the required animation functions from the angular animations module
import { trigger, state, animate, transition, style } from '@angular/animations';
 
export const fadeInAnimation =
    // trigger name for attaching this animation to an element using the [@triggerName] syntax
    trigger('fadeInAnimation', [
 
        // route 'enter' transition
        transition(':enter', [
 
            // css styles at start of transition
            style({ opacity: 0 }),
 
            // animation and styles at end of transition
            animate('.3s', style({ opacity: 1 }))
        ]),
    ]);

还有一个附加了过渡的组件

import { Component } from '@angular/core';
 
// import fade in animation
import { fadeInAnimation } from '../_animations/index';
 
@Component({
    moduleId: module.id.toString(),
    templateUrl: 'home.component.html',
 
    // make fade in animation available to this component
    animations: [fadeInAnimation],
 
    // attach the fade in animation to the host (root) element of this component
    host: { '[@fadeInAnimation]': '' }
})
 
export class HomeComponent {
}

更多细节和现场演示在这篇文章

于 2017-04-22T05:50:16.360 回答