Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS - Animate ng-view transitions

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?

like image 460
Greg Avatar asked Oct 26 '12 08:10

Greg


People also ask

How do you animate in AngularJS?

The ngAnimate module does not animate your HTML elements, but when ngAnimate notice certain events, like hide or show of an HTML element, the element gets some pre-defined classes which can be used to make animations. The directives in AngularJS who add/remove classes are: ng-show. ng-hide.

What is ngAnimate?

The ngAnimate module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks.

What is $Watch in AngularJS?

What is the angular JS watch function? The angular JS $watch function is used to watch the scope object. The $watch keep an eye on the variable and as the value of the variable changes the angular JS $what runs a function. This function takes two arguments one is the new value and another parameter is the old value.

Can animations be achieved with custom directive?

Animations within custom directives can also be established by injecting $animate directly into your directive and making calls to it when needed.


2 Answers

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.

like image 198
Mortimer Avatar answered Oct 11 '22 12:10

Mortimer


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> 
like image 42
madhead - StandWithUkraine Avatar answered Oct 11 '22 12:10

madhead - StandWithUkraine