angular animate
TRANSCRIPT
- 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:
3. Hardcore partstill could not recongnise the differentces?Here we could show some example
compare 1.4 version and less then 1.4 version
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: