Java Master Guru: AngularJS Animation

AngularJS provides animation hooks for common directives such as ngRepeat, ngSwitch, and ngView, as well as custom directives via the $animate service. These animation hooks are set in place to trigger animations during the life cycle of various directives and when triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a JavaScript callback Animation (depending on if an animation is placed on the given directive). Animations can be placed using vanilla CSS by following the naming conventions set in place by AngularJS or with JavaScript code when it's defined as a factory.

Animations are not available unless you include the ngAnimate module as a dependency within your application. Below is a quick example of animations being enabled for ngShow and ngHide:

What Does ngAnimate Do?

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:

ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
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.

In addition, during the animation, the HTML element will have a set of class values, which will be removed when the animation has finished. Example: the ng-hide directive will add these class values:

ng-animate
ng-hide-animate
ng-hide-add (if the element will be hidden)
ng-hide-remove (if the element will be showed)
ng-hide-add-active (if the element will be hidden)
ng-hide-remove-active (if the element will be showed)

Example custom directive with $animate

File name : index.html


<html ng-app="myapp">
<head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="style.css">
 <script type="text/javascript" src="jquery.min.js"></script>
 <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>
 <script type="text/javascript" src="main.js"></script>
</head>
<body >
<div class="col-lg-6">
 <div class="panel panel-default" ng-controller="homeController">
  <div class="panel-heading">
   Merchant List
  </div>
  <div class="panel-body">
   <div class="list-group">
    <div class="list-group-item">
     <strong>
      Merchant
     </strong>
     <button ng-click="order.toggle()" class="btn btn-link btn-xs">
      <span ng-show="order.isAscending()" class="fa fa-angle-up fa-2x"></span>
      <span ng-hide="order.isAscending()" class="fa fa-angle-down fa-2x"></span>
     </button>
    </div>
    <div ng-repeat="marchant in marchants | orderBy:order.predicate " marchant-meta="marchant"  class="list-group-item">
     {{marchant.name}}
    </div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

File name : style.css


body {
  padding: 20px;
}

.list-group-item {
  cursor: pointer;
  &.ng-enter,
  &.ng-leave,
  &.ng-move {
    transition: 0.5s linear all;
  }

  &.ng-enter-stagger,
  &.ng-leave-stagger,
  &.ng-move-stagger {
    transition-delay: 0.05s;
  }

  &.ng-enter,
  &.ng-move,
  &.ng-leave.ng-leave-active {
    opacity: 0;
  }

  &.ng-enter.ng-enter-active,
  &.ng-move.ng-move-active,
  &.ng-leave {
    opacity: 1;
  }

  &.toggle,
  &.toggle-add,
  &.toggle-remove {
    transition: 0.5s ease-out all;
  }

  &.toggle-add-active {
    text-indent: 1em;
  }

  &.toggle {
    background: #fcf8e3;
  }
}

.label {
  &.ng-enter,
  &.ng-leave{
    transition: 0.25s ease-in-out all;
  }

  &.ng-enter,
  &.ng-leave.ng-leave-active {
    opacity: 0;
    margin-left: 2em;
  }

  &.ng-enter.ng-enter-active,
  &.ng-leave {
    opacity: 1;
    margin-left: 0;
  }
}

File name : main.js



angular.module('myapp', ['ngAnimate']).directive('marchantMeta', function($animate) {
 return {
  restrict: 'A',
  scope: {
   marchant: '=marchantMeta'
  },
  link: function(scope, element) 
  {
   var toggled, label;
   scope.$watch('marchant.id', function(id) {
    if (!label) {
     label = angular.element('<span>').addClass('label label-primary');
    }
    label.text('Merchant ID ' + id);
   });

   element.on('mouseenter', function() {
    scope.$apply(function() {
     var contents = element.contents();
     $animate.enter(label, element, contents.eq(contents.length - 1));
    });
   });

   element.on('mouseleave', function() {
    scope.$apply(function() {
     $animate.leave(label);
    });
   });

   element.on('click', function() {
    scope.$apply(function() {
     toggled = !toggled;
     if (toggled) {
      $animate.addClass(element, 'toggle');
     } else {
      $animate.removeClass(element, 'toggle');
     }
    });
   });
  }
 };
}).controller('homeController', function($scope){
 
    $scope.search = {
        name: ''
    };

 $scope.order = {
  predicate: 'name',
  toggle: function() {
   this.predicate = this.isAscending() ? '-name' : 'name';
  },
  isAscending: function() {
   return this.predicate === 'name';
  }
 };
 $scope.marchants= [ 
  { 'name': 'Kaushik', 'id': '0001' },
       { 'name': 'Sanjay', 'id': '0002' },
       { 'name': 'Dhaval', 'id': '0003' },
      { 'name': 'Kirit', 'id': '0004' },
      { 'name': 'Sagar', 'id': '0005' },
       { 'name': 'Ashish', 'id': '0006' },
       { 'name': 'Chirag', 'id': '0007' },
       { 'name': 'Meet', 'id': '0008' },
    ];
})

Java Master Guru

Sunday 20 March 2016

AngularJS Animation

No comments:

Post a Comment

Create Thumbnail in Video in Spring and ffmpeg

Translate