Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Animations in AngularJS using CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 765
    Comment on it

    Animations are the effects that makes the visualization attractive and illusionary moving. In AngularJS we can use animations with the following directives :-

    Directive Animation Type
    ngRepeat enter, leave and move
    ngView enter and leave
    ngInclude enter and leave
    ngSwitch enter and leave
    ngIf enter and leave
    ngShow and ngHide show and hide

     

    1.The first thing you need to do is include the angular animate library-

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>


    2.Next, you need to inject the ngAnimate as a dependency-

    var app = angular.module(sampleApp', ['ngAnimate']);

     

    Function of ngAnimate- Angular’s ngAnimate is used to add and remove classes and recognizes certain events and add some pre-defined classes that are then used for making some animations.

     

    Using CSS-

    AngularJS animation is based on CSS classes. For each animate event, ngAnimate attaches two classes to the DOM element which are- animation name and animation type with active class.
     

    Using CSS class names-

    <div ng-repeat="item in items" ng-animate=" firstanimation ">
        ...
    </div>
     
            . firstanimation-enter {
                -webkit-transition: 1s linear all;
                transition: 1s linear all;
                opacity: 0;
            }
            
            . firstanimation-enter. firstanimation-enter-active {
                opacity: 1;
            }


        
    This is for the fade animation.
    Another way of using class name is-

    <div ng-repeat="item in items" class=animated-class>
      ..
    </div>


    This class name ‘animated-class’ will be used as a reference in CSS and javascript for animations and ng-repeat will add a ng-enter and ng-leave class when adding and removing an item.

     

    CSS code will look like(example)-

    .animated-class.ng-enter, .animated-class.ng-move {
      -webkit-transition:0.5s linear all;
      -moz-transition:0.5s linear all;
      -o-transition:0.5s linear all;
      transition:0.5s linear all;
      opacity:0;
    }


    How to use with CSS transition?-

    <!DOCTYPE html>
    <html>
    <style>
    div {
      transition: all linear 0.5s;
      background-color: red;
      height: 70px;
    }
    
    .ng-hide {
      height: 0;
    }
    
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    
    <body ng-app="myApp">
    
    <h1>Hide the DIV: <input type="checkbox" ng-model="Check1></h1>
    
    <div ng-hide="Check1></div>
    
    <script>
    var app = angular.module('myApp', ['ngAnimate']);
    </script>
    
    </body>
    </html>

    When the ng-hide gets encountered the transition will take place. CSS transitions basically changes the property of the CSS smoothly.

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: