Skip to content

Instantly share code, notes, and snippets.

@anonymoussc

anonymoussc/README.md

Created August 7, 2015 09:37
Show Gist options
  • Save anonymoussc/1835b3d04f8baaf7d105 to your computer and use it in GitHub Desktop.
Save anonymoussc/1835b3d04f8baaf7d105 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS ngRepeat JavaScript animation
Raw
README.md

##AngularJS ngRepeat JavaScript animation

Raw
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ngRepeat JavaScript animation</title>
</head>
<body>
<div ng-controller="repeatController as rc">
<button ng-click="rc.sortItems()">Sort items</button>
<div ng-repeat="item in rc.items" class="repeatItemAnimation">
{{item.name}}
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
/**
* @name repeatControllerFn
* @desc Repeat sample controller
*/
function repeatControllerFn() {
var rc = this;
rc.items = [{name : 'Eleates'}, {name : 'Racana'}, {name : 'Indictio'}, {name : 'Brigantium'}, {name : 'Alta Muta'}];
/**
* @name sortItems
* @desc Sort items array
*/
rc.sortItems = function () {
rc.items.sort(function (a, b) {
return a[name] < b[name] ? -1 : 1;
});
};
}
/**
* @name repeatItemAnimation
* @desc The ngRepeat sample animation function
*/
function repeatItemAnimation() {
/**
* @name moveAnimation
* @desc The move animation function called when an element moves in DOM
* @param element - The element that is moving in DOM
* @param done - Callback function, it must be called to finish the animation
*/
var moveAnimation = function (element, done) {
jQuery(element).css({opacity : 0});
jQuery(element).animate({
opacity : 1
}, 3000, done);
// Here is the optional return function that treats completed or cancelled animations
return function (isCancelled) {
if (isCancelled) {
element.stop();
}
};
};
return {
move : moveAnimation
};
}
var app = angular.module('myApp', ['ngAnimate'])
.controller("repeatController", repeatControllerFn)
.animation(".repeatItemAnimation", repeatItemAnimation);
Raw
style.css
/* Styles go here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment