Angular $animate Tutorial With Animation

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:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

ngRepeatenter, leave and move
ngViewenter and leave
ngIncludeenter and leave
ngSwitchenter and leave
ngIfenter and leave
ngShow and ngHideshow and hide

READ :  C# Factorial program Tutorial with Examples

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 :  Angular find Alternative Rows Selector