Tuesday, January 30, 2018

How to write a program for an animations in angularJS.

  • The ngAnimate module adds and removes classes.
  • The ngAnimate module does not animate your HTML elements, but when ngAnimate notice certain events, like hide or show of an HTML element, the element gets some pre-defined classes which can be used to make animations.

The directives in AngularJS who add/remove classes are:
  1. ng-show
  2. ng-hide
  3. ng-class
  4. ng-view
  5. ng-include
  6. ng-repeat
  7. ng-if
  8. ng-switch
  • The ng-show and ng-hide directives adds or removes a ng-hide class value.
  • The other directives adds a ng-enter class value when they enter the DOM, and a ng-leave attribute when they are removed from the DOM.
  • The ng-repeat directive also adds a ng-move class value when the HTML element changes position.

<!DOCTYPE html>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
height: 100px;

 height: 0;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js">
<body ng-app="myApp">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck">
var app = angular.module('myApp', ['ngAnimate']);


1 comment:

  1. Great and informative article and it is very important and really worth it to me and I am going to implement this method on our website, you have explained it clearly. Thank You.



Thanks For Commented.