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 {}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…