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>