×

Html & Html5

The World's best Software Development Study Portal

AngularJS Animations


We can build animation with the help of CSS

Animations is models to create an illusion of movement

Add the AngularJS Animate library to make your applications ready for animations



Add this libraray in script tag:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>



check the checkbox to hide the DIV

<style> .ani { transition: all linear 0.5s; background-color: lightblue; height: 100px; width: 400px; position: relative; top: 0; left: 0; }
.ng-hide { height: 0; width: 0; background-color: transparent; top:-200px; left: 200px; } </style> <body ng-app="ngAnimate"> <h4>Animate <input type="checkbox" ng-model="myCheck"></h4> <div class="ani" ng-hide="myCheck"></div> </div>

Output

Animate