Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-16 23:30:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(tutorial): update step_12.ngdoc

Browse source 
This time I feel good about this modification to the document, the code listing
on the tutorial page for the animation.js DID NOT match what was actually IN the
file for that branch.  Updated tutorial to reflect actual contents of file

Closes #5922
This commit is contained in:
matthewhintzen 2014-01-22 14:19:00 +13:00 committed by Igor Minar
parent 030a9b8d33
commit 7cf5544a9f
1 changed files with 47 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
docs/content/tutorial/step_12.ngdoc
View file

@ -340,45 +340,58 @@ Although we could do that, let's take the opportunity to learn how to create Jav
__`app/js/animations.js`.__
<pre>
angular.module('phonecatAnimations', ['ngAnimate'])
var phonecatAnimations = angular.module('phonecatAnimations', ['ngAnimate']);
.animation('.phone', function() {
return {
addClass : function(element, className, done) {
if(className != 'active') {
return;
}
element.css({
position: 'absolute',
top: 500,
left: 0,
display: 'block'
});
jQuery(element).animate({
top: 0
}, done);
phonecatAnimations.animation('.phone', function() {
return function(cancel) {
if(cancel) element.stop();
};
},
removeClass : function(element, className, done) {
if(className != 'active') return;
element.css({
position: 'absolute',
left: 0,
top: 0
});
jQuery(element).animate({
top: -500
}, done);
var animateUp = function(element, className, done) {
if(className != 'active') {
return;
}
element.css({
position: 'absolute',
top: 500,
left: 0,
display: 'block'
});
return function(cancel) {
if(cancel) element.stop();
};
jQuery(element).animate({
top: 0
}, done);
return function(cancel) {
if(cancel) {
element.stop();
}
};
});
}
var animateDown = function(element, className, done) {
if(className != 'active') {
return;
}
element.css({
position: 'absolute',
left: 0,
top: 0
});
jQuery(element).animate({
top: -500
}, done);
return function(cancel) {
if(cancel) {
element.stop();
}
};
}
return {
addClass: animateUp,
removeClass: animateDown
};
});
</pre>
Note that we're using {@link http://jquery.com/ jQuery} to implement the animation. jQuery