angular2 component transition animation

Bahgat Mashaly picture Bahgat Mashaly · Dec 7, 2015 · Viewed 9.8k times · Source

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

twsaef picture twsaef · Jan 25, 2016

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

...