AngularJS - Animate ng-view transitions

Question

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?

See http://stackoverflow.com/questions/11786764/track-to-see-when-a-view-changes-in-angularjs for some ideas. — Mark Rajcok, Oct 26 '12 at 19:45

score 70 · Accepted Answer · edited Feb 27 '14 at 16:39

70

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.

edited Feb 27 '14 at 16:39

0xcaff

13,085
5
47
55

answered Apr 04 '13 at 16:10

Mortimer

2,966
23
24

as of right now I can't find 1.1.4 to download. I'm guessing they missed the April 3rd release date? – Chris Montgomery Apr 04 '13 at 20:32
it's [here](http://code.angularjs.org/1.1.4/), I guess that they forgot to update their site, but if you go to the download link in the top menu bar, you can find it. – Mortimer Apr 04 '13 at 20:36
3

there is a good tutorial here : http://www.yearofmoo.com/2013/04/animation-in-angularjs.html – Mortimer Apr 05 '13 at 16:48
3

1.2 changes make this way easier there's the updated post by yearofmoo you need to check out http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html – Bent Cardan Oct 07 '13 at 19:00
4

I also created a demonstration of `ngView` animation that might be interesting to [check](http://dfsq.github.io/ngView-animation-effects/app/). – dfsq Dec 20 '13 at 09:18
Would be good to update this answer w/ regards to 1.2 (lots of changes) since it is selected & the first one people will see. – Matt Sanders Feb 04 '14 at 23:38

score 16 · Answer 2 · answered Jan 23 '13 at 18:27

Check this code:

Javascript:

app.config( ["$routeProvider"], function($routeProvider){
    $routeProvider.when("/part1", {"templateUrl" : "part1"});
    $routeProvider.when("/part2", {"templateUrl" : "part2"});
    $routeProvider.otherwise({"redirectTo":"/part1"});
  }]
);

function HomeFragmentController($scope) {
    $scope.$on("$routeChangeSuccess", function (scope, next, current) {
        $scope.transitionState = "active"
    });
}

CSS:

.fragmentWrapper {
    overflow: hidden;
}

.fragment {
    position: relative;
    -moz-transition-property: left;
    -o-transition-property: left;
    -webkit-transition-property: left;
    transition-property: left;
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s
}

.fragment:not(.active) {
    left: 540px;
}

.fragment.active {
    left: 0px;
}

Main page HTML:

<div class="fragmentWrapper" data-ng-view data-ng-controller="HomeFragmentController">
</div>

Partials HTML example:

<div id="part1" class="fragment {{transitionState}}">
</div>

this is pretty good. Just one issue: the previous view disappears before this one appears, so it doesn't really transition over the previous view. on http://www.artcopycode.com/ they seem to not use views for the routing, but have directives for every fragment that are all loaded from the start. — Mortimer, Mar 12 '13 at 21:07
@Mortimer artcopycode.com does something entirely different from the topic, much easier to execute. — zrooda, Mar 14 '13 at 13:05
this was my point, they do what is asked in the topic: insert different fragments in a single page app, and animate the change of fragments. But instead of using a ng-view and animate between the view (which is not easy as the old view is removed from the DOM before the new view comes in), they use directives (to keep controllers and templates) in their routing. — Mortimer, Mar 14 '13 at 17:09

score 5 · Answer 3 · answered Oct 26 '12 at 13:21

I'm not sure about a way to do it directly with AngularJS but you could set the display to none for both welcome and login and animate the opacity with an directive once they are loaded.

I would do it some way like so. 2 Directives for fading in the content and fading it out when a link is clicked. The directive for fadeouts could simply animate a element with an unique ID or call a service which broadcasts the fadeout

Template:

<div class="tmplWrapper" onLoadFadeIn>
    <a href="somewhere/else" fadeOut>
</div>

Directives:

angular
  .directive('onLoadFadeIn', ['Fading', function('Fading') {
    return function(scope, element, attrs) {
      $(element).animate(...);
      scope.$on('fading', function() {
    $(element).animate(...);
      });
    }
  }])
  .directive('fadeOut', function() {
    return function(scope, element, attrs) {
      element.bind('fadeOut', function(e) {
    Fading.fadeOut(e.target);
  });
    }
  });

Service:

angular.factory('Fading', function() {
  var news;
  news.setActiveUnit = function() {
    $rootScope.$broadcast('fadeOut');
  };
  return news;
})

I just have put together this code quickly so there may be some bugs :)

Could you tailor your answer towards using `ng-view` and the transition between html pages? thanks! — Greg, Oct 29 '12 at 11:22
@Greg I have no idea what you mean by tailoring it towards ng-view. I think ng-view is not capable of transitions. I'm not sure but you could either enhance the ng-view directive OR create your own helper directives as shown above. If you now load welcome the onLoadFadeIn directive can fade in your html and after clicking on a link it will be faded out. What more do you need? — F Lekschas, Oct 30 '12 at 18:02
yeah I think I'd like the ng-view directive to have that incorporated directly into it. Thanks for your time. — Greg, Nov 06 '12 at 16:03
I think in this case I would create a new ng-view and enhance it with the fading functionality :) — F Lekschas, Nov 07 '12 at 17:13

score 1 · Answer 4 · answered Mar 30 '14 at 12:10

1

Try checking his post. It shows how to implement transitions between web pages using AngularJS's ngRoute and ngAnimate: How to Make iPhone-Style Web Page Transitions Using AngularJS & CSS

answered Mar 30 '14 at 12:10

ice.cube

505
4
7

Rohit Vinay · Answer 5 · 2015-12-13T20:24:46.983

-1

1.Install angular-animate

2.Add the animation effect to the class ng-enter for page entering animation and the class ng-leave for page exiting animation

for reference: this page has a free resource on angular view transition https://e21code.herokuapp.com/angularjs-page-transition/

edited Dec 13 '15 at 20:24

answered Dec 12 '15 at 00:05

Rohit Vinay

665
7
38

AngularJS - Animate ng-view transitions

5 Answers5

Linked