CODEWITHSUNDEEP
angularangular-animations
Bahgat Mashaly
Bahgat Mashaly

Reputation: 510

angular2 component transition animation

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

Upvotes: 7

Views: 9999

Answers (5)

Stephen Paul
Stephen Paul

Reputation: 39015

Angular 2 final solution

As stated by @JeanMel, we can use the @routeAnimation built-in directive to achieve this. See my answer here which includes a plunk.

Upvotes: 1

Flavien Volken
Flavien Volken

Reputation: 21299

For a page transition, you can rely on a 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 your YourComponent.ts

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

Optional: This 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}
]);

Upvotes: 0

St&#233;phane Eintrazi
St&#233;phane Eintrazi

Reputation: 809

For those who are using at least Angular 2.0.0-rc2, we can add a transition animation (fadeIn for example) between our components by adding a div that wrap our component view like this : 

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

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

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

[EDIT] an alternative way without using the state is as follow:

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

And the component:

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

Upvotes: 3

twsaef
twsaef

Reputation: 2121

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

...

Upvotes: 4

staeke
staeke

Reputation: 311

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)

Upvotes: 4

Related Questions