Get into know the latest version Angularsjs 1.4 version for animate css part, and compare the 1.3 version one!

1. Little presentation
Tess Hsu

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

3. 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.

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

5.  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

6.  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; }

7.  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 ; }
 }

8. 
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 { ... }

9.  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
 }
 }
 });

10. 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);
 });

11.  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);

12.  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);
 }
 }
 });

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

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

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

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

17. 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:

18. translate as like:

19. 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

20. Use $animate directly instead of element definition

21. 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:

22. 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:

23. another way inject the dependency $animateCss

24. another way inject the dependency $animateCss

25. Thanks for watch!!