Quick Contact


    AngularJS Animation

    Whenever the transformation of HTML elements happens, it gives the feel of the illusion of motion, this phenomenon is known as animation. AngularJS comes with the feature of animated transitions too. With the help of CSS, AngularJS can provide animation.

    The very first step for AngularJS animation is to include an animation library.

    < script>

    Src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js”>

    < /script>

    Then, refer ng-animate module in an application.

    Ways to Add ng-Animate

    Ng-Animate is a module, which is used to add a class or remove a class. It is required to show the animation in your application. If you do not include an ng-animate module in your angular JS application, the animation will not be visible.

    There are two ways to add ng-animate in our application
    • Include it in the root element where you are using the ng-app directive.
    Syntax:

    < body ng-app="ngAnimate">

    • Add ng-animate as a dependency
    Syntax:

    < script>

    var demo = angular.module(‘demoApp’, [‘ngAnimate’]);

    < /script>

    Where demoApp is the name given corresponding to ng-app (ng-app= “demoApp”) directive in the root element.

    Work Of ng-Animate:

    Actually ng-Animate do not transform the HTML element, but when you are using ng-animate in your angularJS application, It notices some events HTML elements like a show or hide. To make animations, elements have some pre-defined classes.

    Example of AngularJS Animation

    The below code will hide the div if the checkbox is checked otherwise it will show the div.

    	< !DOCTYPE html>
    	< html>
    	< style>
    	div{
    	transition: all linear 0.5s;
    	border: 2px solid black;
    	height: 50px;
    	width: 50%;
    	position: relative;
    	top: 0;
    	left: 0;
    	}
    	.ng-hide {
    	height: 0;
    	width: 0;
    	top:-200px;
    	left: 200px;
    	}
    	< /style>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js">< /script>
    	< body ng-app="ngAnimate">
    	< h1>Want to hide the DIV: < input type="checkbox"ng-model="ValueOfCheck">< /h1>
    	< div ng-hide="ValueOfCheck">Div Can Get Hidden< /div>
    	< /body>
    	< /html>
    	
    Output:

    Want to hide the div

    When the checkbox gets checked Div gets hidden.

    List of Directives For Animation in AngularJS
    • ng-show –

      It adds or removes an ng-show value from the DOM element.

    • ng-hide –

      It adds or removes an ng-hide value from the DOM element.

    • ng-class –

      It adds or removes an ng-class value from the DOM element.

    • ng-view –

      When it enters the DOM, it adds ng-enter class and when it leaves the DOM, it adds an ng-leave class.

    • ng-include –

      When it enters the DOM, it adds ng-enter class and when it leaves the DOM, it adds the ng-leave class.

    • ng-repeat –

      When it enters the DOM, it adds ng-enter class and when it leaves the DOM, it adds an ng-leave class. Also, It adds ng-move to DOM elements too.

    • ng-switch –

      When it enters the DOM, it adds ng-enter class and when it leaves the DOM, it adds the ng-leave class.

    • ng-if –

      When it enters the DOM, it adds ng-enter class and when it leaves the DOM, it adds the ng-leave class.

    Enroll Yourself in Live Classes For AngularJS Tutorial.

    How to Enable Or Disable Animation in AngularJS?

    We can even enable an animation or disable animation for specific elements or globally too.

    There are four ways to do so:

    1. $animateProvider.customFilter()

      It is called during the config phase and takes filter as the argument. It will filter animation based on the returned bolean value. If the value it returns is true, an animation will get perform otherwise animation will not get performed.

      demoapp.config(function($animateProvider){

      $animateProvider.customFilter(function(node, event, options){

      return event === ‘enter’|| event === ‘leave’;

      });

      });

    2. $animateProvider.classNameFilter()

      It is called during the config phase. It takes regex as the argument. This argument is matched with the class that will animate. The advantage of this strategy compares to others is that it gives speed a boost

      app.config(function($animateProvider){

      $animateProvider.classNameFilter(/animate-/);

      });

      .animate-fade-add.animate-fade-add-active {

      transition: all 1s linear;

      opacity: 0;

      }

    3. $animate.enabled()

      $animate.enabled(false) consist of the single boolean argument, it disables the animation globally.

      $animate.enabled(myelement, false) consist of two argument. The first argument is the DOM element and the second argument is a Boolean value. It disables or enables animation on that particular element

    4. OverWriting Styles

      Whenever an AngularJS animation is initiated, animate applied ng-animate class on the elements for the time for which animation is about to take place. On that class to skip animation we can apply css transition styling.

      .my-class{

      transition: transform 4s;

      }

      .my-class:hover{

      transform: translateY(30px);

      }

      my-class.ng-animate{

      transition: 0s;

      }

    Enroll Yourself in Live Classes For Angularjs Training in Noida.

    Copyright 1999- Ducat Creative, All rights reserved.