Animations

In AngularJS, you can build animated transition with the help of CSS. The CSS transforms the HTML elements that give you an illusion of motion.
You must include the following things to make your application ready for animations:
AngularJS Animate library:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
Refer to the ngAnimate module in your application:
<body ng-app="ngAnimate">
Angular animation Example

   1) Hide the Dive

    <html> 
<style> 
div {  
transition: all linear 0.5s; 
background-color: #FF0000; 
height: 100px; 
width: 500px; 
position: relative; 
top: 0; 
left: 0; 
} 
.ng-hide { 
height: 0; 
width: 0; 
background-color: transparent; 
top:-200px; 
left: 200px; 
} 

</style> 
<script src="angular.min.js"></script> 
<script src="angular-animate.js"></script> 
<body ng-app="ngAnimate"> 
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1> 
<div ng-hide="myCheck">AngularJs-Vision Computers!<br />
<b><font color="#FFFF00">Vision Computers</font></b> Established in the year <font color="#FFFF00"><b>1992</b></font> By<font color="#FFFF00"><b> D.G.Prsad.</b></font>
<p><marquee direction="left"><font color="#FFFF00">My Couching Subjects are : Ms-Office,Packages,Data entree,WebDesigns,ProjectWork And App Creating Etc...</font><br />
<marquee behavior bgcolor="#FFFF00" direction="right">Contact For me: 9885348743.</marquee>

</div> 
</body> 
</html> 

What does ngAnimate do?

The ngAnimate module does not animate HTML elements itself. It only adds and removes some pre-defined classes to make animations when ngAnimate notice certain events, like hide or show of an HTML element.
Following is a list of directives in AngularJS who add/remove classes:

With that you're ready to get started!
The ngAnimate module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks. Animations are not enabled by default, however, by including ngAnimate the animation hooks are enabled for an Angular app.

Usage

Simply put, there are two ways to make use of animations when ngAnimate is used: by using CSS and JavaScript. The former works purely based using CSS (by using matching CSS selectors/styles) and the latter triggers animations that are registered via module.animation(). For both CSS and JS animations the sole requirement is to have a matching CSS class that exists both in the registered animation and within the HTML element that the animation will be triggered on.

Directive Support

The following directives are "animation aware":


Directive

Supported Animations

ngRepeat

enter, leave and move

ngView

enter and leave

ngInclude

enter and leave

ngSwitch

enter and leave

ngIf

enter and leave

ngClass

add and remove (the CSS class(es) present)

ngShow & ngHide

add and remove (the ng-hide class value)

form & ngModel

add and remove (dirty, pristine, valid, invalid & all other validations)

ngMessages

add and remove (ng-active & ng-inactive)

ngMessage

enter and leave

Animations are not available unless you include the ngAnimate module as a dependency within your application.
Below is a quick example of animations being enabled for ngShow and ngHide:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>animation ngShow and ngHide:</title>
<link href="animations.css" rel="stylesheet" type="text/css">

  <script src="angular.min.js"></script>
<script src="angular-animate.js"></script>

<style>
.content-area {
width:500px;
border: 1px solid black;
margin-top: 10px;
padding: 10px;
background-color: #FF0000;

}

.sample-show-hide {
transition: all linear 0.5s;
}
.sample-show-hide.ng-hide {
opacity: 0;
}

</style>

</head>
<body ng-app="ngAnimate">
<div ng-init="checked = true">
<label>
<input type="checkbox" ng-model="checked" />
Is visible(ngShow and ngHide):
</label>
<div class="content-area sample-show-hide" ng-show="checked">
<font color="#FFFFFF"> Vision computers Hide the slowly ! Please Click the Check box....</font>
</div>
</div>
</body>
</html>

 

For
More Explanation
&
Online Classes

Contact Us:
+919885348743