Angular2 component transition animation

Question

How to make a page transition animation in angular2?

I try this 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 a css file, like this

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

But it does not work

Answer 1

As of December 2015, animations are not implemented in the beta version of Angular 2 and should appear in the final version.

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

What will happen next?

We are already working hard on a set of improvements to move Angular2 to its full and final release. So far we will make many small improvements, big for the finale:

• Reduce the size of the Angular 2 payload.
• An implementation of the Angular CLI can be used to complete the entire development process.
• Creating a more convenient route definition for developers and API links for the component router.
• Support for animations.
• Support for I18n and L10n.

Edit: now the animation is at http://angularjs.blogspot.com.au/2016/06/rc2-now-available.html

RC2 is now available

Today we were pleased to announce that we are shipping Angular 2.0.0-rc2.

This release includes:

• Animation structure

...

Answer 2

As with beta-15, the main transitions are using, for example, .ng-enter and .ng-enter-active . Note that you must add the ng-animate to the animated element. See This plunkr for an example http://plnkr.co/edit/WcH3ndMN0HOnK2IwOCev?p=preview

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

Answer 3

For those who use at least Angular 2.0.0-rc2, we can add transition animations (like fadeIn) between our components by adding divs that wrap our component view like this:

 <div @fadeIn="'in'"> ... Component HTML ... </div> 

And in your component we have to set the fadeIn animation:

 @Component({ ... animations: [ trigger('fadeIn', [ state('*', style({'opacity': '0'})), transition('* => in', [animate('800ms linear', style({'opacity': '1'}))]) ]) ] 

[EDIT] An alternative, stateless method is as follows:

 <div @fadeIn> ... Component HTML ... </div> 

And component:

 @Component({ ... animations: [ trigger('fadeIn', [ state('*', style({'opacity': 1})), transition('void => *', [ style({'opacity': 0}), animate('800ms linear') ]) ]) ] 

Answer 4

Angular 2 Ultimate Solution

As @JeanMel pointed out, we can use the built-in @routeAnimation directive to achieve this. See my answer here , which includes the bar.

Answer 5

You can rely on routeAnimation to routeAnimation to the routeAnimation

Animations.ts

 import {style, animate, transition, state, trigger} from '@angular/core'; export default [ trigger('routeAnimation', [ state('*', style({opacity: 1, height: '100%'})), transition('void => *', [ style({opacity: 0, height: '100%'}), animate(200) ]), transition('* => void', animate(0, style({opacity: 0, height: '100%'}))) ]) ]; 

Then in YourComponent.ts

 import animations from './Animations'; @Component({ ... animations: animations }) export class YourComponent { @HostBinding('@routeAnimation') public routeAnimation:void; ... } 

Optional: assumes your routing.ts file looks like

 import {RouterModule} from '@angular/router'; import {ModuleWithProviders} from '@angular/core'; import {YourComponent} from './YourComponent'; export const routing:ModuleWithProviders = RouterModule.forChild([ {path: "aPath", component: YourComponent} ]);