Angular animate

 - what is angularsjs  - Installation  - How it works (< angulars 1.3)  - How it works now (angulars 1.4)  - Animate part Easy  - Final

Angulars. Js is an open-source web application framework maintained by Google 2012 Is a client-side MVC architecture. Is two-way data binding for it’s most notable feature with {{ }} DOM control structures for repeating, showing and hiding DOM fragments Support for forms and form validation Attaching new behavior to DOM elements,such as DOM event handling Grouping of HTML into reusable components.

 $ bower install --save angular-animate  <script src="js/vendor/angular.js"></script>  <script src="js/vendor/angular-animate.js">  </script>  angular.module('myApp', ['ngAnimate']);

 The $animate service itself, by default, applies two CSS classes to the animated element for eachanimation event  Directive Events: at least 2 events  ngRepeat enter, leave, move  ngView enter, leave  ngInclude enter, leave  ngSwitch enter, leave  ngIf enter, leave  ngClass or class=”…” add, remove  ngShow add, remove (.ng-class)  ngHide add, remove

 Html: <div class="fade-in"></div>  Css: .fade-in { transition: 2s linear all;  -webkit-transition: 2s linear all;  }  .fade-in.ng-enter {  opacity: 0;  }  .fade-in.ng-enter.ng-enter-active {  opacity: 1;  }  To actually run the animation,we need to include the CSS animation definition.In this  definition, we need to include both the duration and the element attributes that we’re  going to modify.  .fade-in.ng-enter { transition: 2s linear all; -webkit-transition: 2s linear all; }

 When we bind the animation to the CSS element, we need to specify both the name of the animation as well as the duration.  Remember to add the animation duration: If we forget to add the duration of the animation, the duration will default to 0, and the animation will not run.  @keyframes firstAnimation {  0% { color: yellow; }  20% { color: yellow; }  40% { color: yellow; }  8 0% { color: yellow; } 100% {color: black ; }  }

 Html:  <div ng-repeat="item in items" class="fade-in">Item: #1 -- {{ item }}</div>  Css:  .fade-in.ng-enter-stagger {  -webkit-animation-delay:200ms; animation-delay:200ms;  /* css stagger animations also needs to be here */  -webkit-animation-duration:0; animation-duration:0;  }  .fade-in.ng-enter {  /* pre-reflow styling */  opacity:0;  -webkit-animation: 2s firstAnimation;  animation: 2s firstAnimation;  }  .fade-in.ng-enter-stagger { ... }  @keyframes firstAnimation { ... }  @-webkit-keyframes firstAnimation { ... }

 angular.module('myApp', ['ngAnimate']).animation('.fade-in', function() {  return {  enter: function(element, done) {  // Run animation  // call done when the animation is complete  return function(cancelled) {  // close or cancellation callback  }  }  });

HTML: <div ng-controller="HomeController">  <ul>  <li class="fade-in" ng-repeat="r in roommates”>{{ r }}</li>  </ul>  </div> HomeController:  angular.module('myApp', ['ngAnimate']).controller('HomeController', function($scope) {   $scope.roommates = ['Ari', 'Q', 'Sean', 'Anand’];  setTimeout(function() {  $scope.roommates.push('Ginger');  $scope.$apply(); // Trigger a digest  setTimeout(function() {  $scope.roommates.shift();  $scope.$apply(); // Trigger digest  }, 2000);  }, 1000);  });

 After we add css transitions/keyframe animation  Or deal with javascript animation:  define the enter/ leave properties on our animation description object  angular.module('myApp’).animation('.fade-in', function() {   return {  enter: function(element, done) {  // Raw animation without jQuery  // This is much simpler with jQuery  var op = 0, timeout,animateFn = function() {  op += 10;  element.css('opacity', op/100);  if (op >= 100) {  clearInterval(timeout);  done();  }  };  // Set initial opacity to 0  element.css('opacity', 0);

 timeout = setInterval(animateFn, 100);  },  leave: function(element, done) {  var op = 100,  timeout,animateFn = function() { op-=10;  element.css('opacity', op/100);  if (op <= 0) {  clearInterval(timeout);  done();  }  };  element.css('opacity', 100);  timeout = setInterval(animateFn, 100);  }  }  });

1. Basic Concept $animateCss goal = allow pre-existing animations or directive to create more complex animations that can be purely driven using CSS code.

Example Here we use animation called: fold-animate/ inject $animateCss and return as an Object function

Example the magic here is that $animateCss will detect automatically the duration of transite since the css use linear value

3. What is returned $anmateCss work in 2 stages: Preparation / Animation Preparation: generated CSS classes: added/ removed on the element

3. What is returned $anmateCss work in 2 stages: Preparation / Animation Preparation: generated CSS classes: added/ removed on the element Once $anmateCss is called it will return an object:

3. Hardcore part still could not recongnise the differentces? Here we could show some example compare 1.4 version and less then 1.4 version

Use $animate directly instead of element definition

Once use $animate without call $scope.$apply() to see if any binding values have changed, more flexable to excused! That’s see the practicle part without using jquery:

simply use $animateCss to add jquery animate through add / remove Class, and duration, from one Css style to another ones. Here is the one insert jquery one with 1.3 version:

another way inject the dependency $animateCss

Angular animate

More Related Content

What's hot

Similar to Angular animate

Recently uploaded

Angular animate