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

READ :  Angular ng-focus Directive Set Focus on Textbox

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>

View Demo

READ :  C# Jagged Arrays Tutorial with Examples