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?
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
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>