Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
671 views
in Technique[技术] by (71.8m points)

angular - Can you move your animations to an external file in Angular2?

The @Component annotation provides us with an animations property. This can be used to define a list of triggers each with a lot of state and transition properties.

When you add multiple animations to a component, this list can become pretty long. Also some animations would be really nice to use in other components as well. Having to put them directly in each component seems tedious and is repetitive - plus it violates the DRY principle.

You can define the template and styles properties on your component as well, but here you have the option of providing a templateUrl and styleUrls instead. I can't seem to find an animationUrls property - am i missing something - is there a way to do this?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Sure you can. You can just declare the animation in a different file, then import it where you need it

animations.ts

export const animation = trigger(...)

component.ts

import { animation } from './animations'

@Component({
  animations: [ animation ]
})

Or if you want to make it configurable, you can export a function. For example, take a look at the Fuel-UI Collapse. This is a reusable (and configurable) animation

collapse.ts

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

Then in your components, just use

import { Collapse } from './collapse'

@Component({
  animations: [ Collapse(300) ],
  template: `
    <div @collapse="collapsed ? 'true' : 'false'">
    </div>
  `
})
class MyComponent {}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...