css animations - Page transitions in Angular 2 -

since angular 2 animations not yet totally updated, there way animate page css?

i tried adding host in component wasnt helpfull.

for example component:

@component({     selector: 'pos-projects-list',     pipes: [asyncpipe, searchpipe],     directives: [rippledirective],     templateurl: 'app/dashboard/pages/projects/templates/list.html',     host: {'class' : 'ng-animate'} }) 

so doing here adding class pos-projects-list can see in screenshot.

screenshot

the regular css animation work fine:

http://www.w3schools.com/css/css3_animations.asp

https://developer.mozilla.org/en-us/docs/web/css/css_animations/using_css_animations

update: actual question "how change class of host element?"

here example:

@component({    selector: 'pos-projects-list',    host: {'[class.ng-animate]':'somefield'} }) export class posprojectlistcomponent implement afterviewinit {   somefield: bool = false;    // alternative way   // @hostbinding('class.ng-animate') somefield: bool = false;   // -----------------------    ngafterviewinit() {     somefield = true; // set class `ng-animate` on `<pos-projects-list>`   } }