Angular2 Page Transition Animation Example

In this example, we will see how page transition animation can be achieved in Angular 2 using ng-animate . Since it is really just about css, I am not going to separate the example into Javascript and Typescript.

 

Folder

Angular2 Page Transition Animation Example folder

page1.component.ts

Page 1 is a very basic component. Css styles are embeded in template file in this example. If you prefer to have it in a css file, you can use styleUrls in the component metadata.

page1.component.tpl.html

This is the template for page 1 component with styles embedded. The animation effect is horizontal flip when page 1 is entered. I didn’t bother setup ng-leave because ng-leave is not working properly as of version 2.0.0-beta.6.

page2.component.ts

page2.component.tpl.html

This is the template for page 2 component with styles embedded. The animation effect is rotate when page 2 is entered.

app.component.ts

This is the root component.

app.component.tpl.html

The template for the root component.

[adinserter block=”1″]

boot.ts

index.html

Result

Angular2 Page Transition Animation Example result

Resources

 


facebooktwittergoogle_plusredditlinkedin

Wayne Hong

Passionate Java full stack developer.
  • netanel

    You can explain the :host part please?

    • Wayne Hong

      Long story short, whenever a component is created, Angular put the template into a root element to emulate Shadow Dom and scoped styles that sort of stuffs. When a component is entering the view, Angular checks if the element has ‘ng-animate’ in the class attribute of the root element (host) or not, if yes, it then adds ng-animate related classes to it. So, what we need to do here is to define animation css for the host element. And that’s when :host come into play. Angular actually added some attributes to the component when it is rendered, and also when Angular sees :host on the styles, it will rewrite the style to the head of the html with proper selectors to only match that particular component.

      Hope this answers your question. feel free to let me know if not. :)

      • netanel

        Thank’s for the explanation. i’m sure other people will love to see this in the post itself.

        • Wayne Hong

          glad that helps. Cheers.

  • Ændri Domi

    Very useful thanks, but there is a way to animate also the leaving page? ng-leave class is not working for me, and the leaving page is just disappearing in 0ms

    • Ændri Domi

      Oh , i just read in the article that ng-leave is not working properly…

      • Wayne Hong

        Hey, feel free to leave any questions. If you want to know more information about the ng-leave issue, you can check out this issue https://github.com/angular/angular/pull/6768. Based on the information on the issue, the fix should be available soon.

  • Chun Yin Lo

    Can I put :host() styling into a standalone css file? Seems Angular are not applying it to component

    • Wayne Hong

      You surely can. Have you tried put them into a css file and use styleUrls to reference it?

  • Купстас Николай

    How about RC3? =)

  • Is this for the default angular router only, or will it work with ui-router-ng2 too? I’m using ui-router and it doesn’t seem that the ng-enter classes are being added at all.