Angular $animate Tutorial With Animation
Today, We want to share with you Angular $animate Tutorial With Animation.
In this post we will show you Angular $animate Tutorial With Animation, hear for Angular $animate Tutorial With Animation we will give you demo and example for implement.
In this post, we will learn about Angular $animate Tutorial With Animation with an example.
AngularJS Animations : Tutorial
What is an Animation?
An animation is when the transformation Display of an HTML tags element gives to you an illusion of all motion.
Need for Animations in angular.
<script src="https://infinityknow.com/libs/angular-animate.js"></script>
AngularJS animate Tutorial With Animation Example
How to use AngularJS with NgAnimate?
ngRepeatenter, leave and move
ngViewenter and leave
ngIncludeenter and leave
ngSwitchenter and leave
ngIfenter and leave
ngShow and ngHideshow and hide
Methods of $animate
$animate : – enter(element, parent, callback)
$animate : – leave(element, callback):
$animate : – move(element, parent, [after], callback)
$animate : – addClass(element, className, callback)
$animate : – removeClass(element, className, callback)
Syntax Of Using $animate Service
var yourApp1 = angular.module("yourAppname", ["ngAnimate"]);
yourApp1.directive('yourdirname', function ($animate) {
return{
//something code......
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS provides to display animated transitions fly, with help from CSS.</title>
<style>
div {
transition: all linear 0.6s;
background-color: #87C540;
height: 90px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: #DE3641;
top:-200px;
left: 200px;
}
</style>
<script src="https://infinityknow.com/libs/angular.min.js"></script>
<script src="https://infinityknow.com/libs/angular-animate.js"></script>
<body ng-app="ngAnimate">
<h3>Customizing animations : in AngularJS Example</h3>
<p> Adding CSS Animations to AngularJS Applications </p>
<h1>Please Select CheckBox to Hide the DIV: <input type="checkbox" ng-model="simpleCheck" name="animation"></h1>
<div ng-hide="simpleCheck"></div>
</body>
</html>