AngularJS - Animation of ng-view transitions

Question

I have 2 html pages, welcome.html and login.html , both of which are “embedded” in index.html , depending on the URL, through the ngview attribute and the router provider , as part of my AngularJS application.

An example of this can be found on the AngularJS homepage in the Connect backend section.

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

Answer 1

Angularjs 1.1.4 now introduced the ng-animate directive to help animate various elements, notably ng-view.

You can also watch a video about this new game.

UPDATE compared to angularjs 1.2, the way animations work has changed a lot, most of them are now controlled using CSS, without the need to configure javascript callbacks, etc. You can check out the updated Year of Moo tutorial . @dfsq noted in the comments a good set of examples .

Answer 2

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; } 

HTML homepage:

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

Partial HTML example:

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

Answer 3

I'm not sure how to do this directly using AngularJS, but you can configure the display to be both a greeting and an input and animate the opacity using the directive after loading them.

I would do it like this. 2 Guidelines for fading in content and fading when you click a link. The directive for fadeouts can simply animate an item with a unique identifier or call a service that broadcasts 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); }); } }); 

Services:

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

I just compiled this code quickly so that there could be some errors :)

Answer 4

Try checking his message. It shows how to implement transitions between web pages using AngularJS ngRoute and ngAnimate: How to make iPhone-style web page transitions using AngularJS and CSS

Answer 5

1.Install angular -animate

2. Add an animation effect to the ng-enter class to animate the page input, and the ng-leave class for the page that exits the animation

for reference: on this page there is a free resource in the angular transition of the form https://e21code.herokuapp.com/angularjs-page-transition/