AngularJS - Animate ng-view transitions

javascript angularjs animation url-routing
Greg picture Greg · Oct 26, 2012 · Viewed 109.8k times · Source

I have 2 html pages, welcome.html and login.html both of which are "inserted" into index.html dependending on the URL via an ngview attribute and router provider, as part of my AngularJS app.

An example of this can be found on the AngularJS home page under Wire up a Backend.

My question: Is there a way to animate the transition between welcome.html and login.html?

Answer

Mortimer picture Mortimer · Apr 4, 2013

Angularjs 1.1.4 has now introduced the ng-animate directive to help animating different elements, in particular ng-view.

You can also watch the video about this new featue

UPDATE as of angularjs 1.2, the way animations work has changed drastically, most of it is now controlled with CSS, without having to setup javascript callbacks, etc.. You can check the updated tutorial on Year Of Moo. @dfsq pointed out in the comments a nice set of examples.

Related questions

Angular-animate - Unknown provider: $$asyncCallbackProvider <- $$asyncCallback <- $animate <- $compile

I have a strange issue. I want to include angular-animate in my AngularJS project - I am using AngularJS v1.2.6. I have added angular-animate to my bower file. It has downloaded and added to my HTML file in the source …

Read More
Augular 2 Router Animation - Cannot find module '@angular/platform-browser/animations'

I have been following the Angular 2 Routing and Navigation example that can be found at this link: https://plnkr.co/edit/I4ArEQTniO7MJtfzpBWl?p=info. When I run the transpiler I get the error message: "client/app/app.module.…

Read More
AngularJS $animate.enter not adding ng-enter and ng-enter-active classes

I'm trying to incorporate the $animate service into my own directive. I can't get enter and leave to actually animate. The weird thing is that using $animate.enter, the element is appended to the DOM, and the callback function fires. …

Read More