angular2 component transition animation

Question

How to make page transition animation in angular2 ?

I try this is code but not working

@Component({
   selector:'myPagefirstPage', 
})

@View({
   template: `<div  class="view-animate ng-animate" > 
                 <h1>First Page</h1>
              </div>`

And I put my animation class in css file like this

.view-animate.ng-enter {....}

But it doesn't work

Answer 1

As of beta 15, basic transitions using e.g. .ng-enter and .ng-enter-active works. Note that you must add the ng-animate class to the animated element. See this plunkr for an example http://plnkr.co/edit/WcH3ndMN0HOnK2IwOCev?p=preview

However, note that ng-leave is not supported as of now as the DOM node is removed before out animation is done (see https://github.com/angular/angular/pull/6768)

Answer 2

As of December 2015, animations are not implemented in Angular 2 beta release, and are due in the final release.

http://angularjs.blogspot.com.au/2015/12/angular-2-beta.html

What comes next?

We're already hard at work on the set of improvements to move Angular 2 to its full and final release. While we will make many small improvements, the big ones for final are:

1. Reducing Angular 2's payload size.
2. Making the Angular CLI usable end to end throughout the development process.
3. Creating a more developer-friendly route definition and link API for the Component Router.
4. Support for animations.
5. I18n and L10n support.

Edit: Animations are now in - http://angularjs.blogspot.com.au/2016/06/rc2-now-available.html

RC2 Now Available

Today we’re happy to announce that we are shipping Angular 2.0.0-rc2.

This release includes:

1. Animation Framework

...