Can you move your animations to an external file in Angular2?
Sure that's possible. You can make for instance an animations.ts
and let it export all kind of animation constants:
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'))
])
and in your component you can import this animation using the import
statement:
import {PRETTY_ANIMATION} from 'animations';
and apply it to your component:
@Component({
selector : `...`
animations : [PRETTY_ANIMATION]
})
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 {}