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
?
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.
The ngAnimate module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks.
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.
Animations within custom directives can also be established by injecting $animate directly into your directive and making calls to it when needed.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With