Angular animate

Little presentation

Tess Hsu

- 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 / AnimationPreparation: generated CSS classes: added/ removed on the element

3. What is returned

$anmateCss work in 2 stages: Preparation / AnimationPreparation: generated CSS classes: added/ removed on the element

Once $anmateCss is called it will return an object:

translate as like:

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

another way inject the dependency $animateCss

Thanks for watch!!