Angular 2 RC 4 New Animations not supported in Directives

Hi,

It seems that in current release we can add animations to components only and cannot define them as directives. I mean:

the below works

@Component({
    selector: "animate-demo",
    animations: [
        trigger('openClose', [
            state('closed, void',
                style({ height: "0px" })),
            state('open',
                style({ height: "*" })),
            transition("* => *", animate(200))
        ])
    ]
})

Whereas the below doesn’t work:

@Directive({
    selector: "animate-demo",
    animations: [
        trigger('openClose', [
            state('closed, void',
                style({ height: "0px" })),
            state('open',
                style({ height: "*" })),
            transition("* => *", animate(200))
        ])
    ]
})

And gives compilation error in visual studio:

"Argument of type ‘{ selector: string; animations: AnimationEntryMetadata[]; template: string; }’ is not assignable to parameter of type ‘{ selector?: string; inputs?: string[]; outputs?: string[]; properties?: string[]; events?: strin…’.
"

Usually we might want to have the commonly used animations such as slideDown, sliddeUp, fadeIn, fadeOut defined at one place as a directive and then in components where we want to use them we would just want to import the directive and use the animation instead of redefining animation in each component.

[matsko]

Even though directives are not attached to a view, they should still be able to place animations on the host element that they are attached to.

Say for example you wanted to create a directive to manipulate animate.css animations:

@Directive({
   styleUrls: ['animate.css'],
   selector: '[animateCss]',
   host: {
      '[@currentAnimation]': 'animationState'
   },
   animations: [
      trigger('currentAnimation', [
         transition('* => rotate3d', animate(1000, keyframes('rotate3d'))),
         transition('* => hinge', animate(1000, keyframes('hinge'))),
         transition('* => flipX', animate(1000, keyframes('flipX')))
      ])
   ]
})
class AnimatorMan {
   @Input("animateCss")
   public animationState;
}

(The use of using CSS classes/keyframes within animate will be possible once the CSS parser is integrated. The example above is just to show how useful it can be to make a directive that manages animations.)

[molcik]

As a workaround you can create animations.ts file like:

export class Animations: [
    public static heroState = 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 then use it in components like:

import { Animations }                          from './animations';

@Component({
  selector: 'myapp-hero',
  styleUrls: ['./hero.component.css'],
  templateUrl: './heor.component.html',
  animations: [Animations.heroState]
})