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.


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

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

Output



0 comments:

Post a Comment

Thanks For Commented.

TechTalk