.png)
How to using ngAnimate in partial template views.
Using nganimate in partial template view.
In this tutorial using two type of modules
1.ngRoute - It is used for routing of templates
2.ngAnimate - It is used for animation effects in user file.
The ngAnimate is using slides show and moving effects in custom file.
download link - ngAnimate resource file
The ngRoute is using identify the template location path.
download link - ngRoute resource file
index.html
<!DOCTYPE html>
<!--ng-app module name - animation-->
<html ng-app="animation">
<!--head tag starts-->
<head>
<!--custom css file-->
<link rel="stylesheet" href="style.css">
<!--angularjs resource files-->
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-animate.min.js"></script>
<script src="script.js"></script>
</head><!--head tag ends-->
<!--body tag starts-->
<body ng-controller="animateCtrl">
<!--click button - animation on or off status-->
<p>ngAnimate using in templates view : <button ng-click="animateCtrl.switch()">Animation On / Animation Off</button></p><br><br>
<!--ng-view - partial template views-->
<ng-view></ng-view>
</body><!--body tag ends-->
</html><!--html tag ends-->
Custom script file.
script.js
angular.module('animation', ['ngRoute', 'ngAnimate' ])
.config(function(
$routeProvider )
{
$routeProvider.
when('/', { templateUrl : 'template-one.html'}).
when('/alt', {templateUrl : 'template-two.html'});
}).
controller('animateCtrl', function (
$window, $location )
{
this.switch = function()
{
$location.path('/alt' === $location.path() ? '/' : '/alt');
};
});
Custom CSS file.
style.css
ng-view {
display :block;
border : 1px dashed black;
width : 250px;
height : 250px;
position : absolute;
top : 20%;
}
.ng-enter {
-webkit-animation : enter 1s cubic-bezier(.17, .67, .83, .67);
animation : enter 1s cubic-bezier(.17, .67, .83, .67);
}
.ng-leave {
-webkit-animation : enter 1s ease-out reverse;
animation : enter 1s ease-out reverse;
}
@-webkit-keyframes enter {
0% {
background : #f80;
top : 100%;
}
70% {
background : #f08;
}
100% {
background : #8f8;
top : 20%;
}
}
@keyframes enter {
0% {
background : #f80;
top : 100%;
}
70% {
background : #f08;
}
100% {
background : #8f8;
top : 20%;
}
}
template-one.html
AngularJS - ngAnimate
template-two.html
AngularJS - ngRoute
Demo ngAnimate - Plunker
Touch with me! Gain more.
This comment has been removed by the author.
ReplyDelete