Skip to content

Instantly share code, notes, and snippets.

@klebba
Created August 22, 2013 00:46
Show Gist options
  • Save klebba/6302016 to your computer and use it in GitHub Desktop.
Save klebba/6302016 to your computer and use it in GitHub Desktop.
Angular animation service (tested with 1.1.5, breaks in 1.2.0rc1)
(function() {
'use strict';
var app = angular.module('App');
/**
* Provide a means for hooking into view animation events
*/
app.factory('transitionService', [function() {
function TransitionHelper(type) {
this.setup = function(element) {
element.addClass(type + '-setup');
};
this.start = function(element, done) {
function onTransitionEnd(event) {
element.unbind('transitionend', onTransitionEnd);
element.unbind('webkitTransitionEnd', onTransitionEnd);
element.unbind('oTransitionEnd', onTransitionEnd);
element.unbind('msTransitionEnd', onTransitionEnd);
element.removeClass(type + '-setup');
element.removeClass(type + '-start');
done();
}
element.bind('transitionend', onTransitionEnd);
element.bind('webkitTransitionEnd', onTransitionEnd);
element.bind('oTransitionEnd', onTransitionEnd);
element.bind('msTransitionEnd', onTransitionEnd);
element.addClass(type + '-start');
};
}
return {
create: function(type) {
return new TransitionHelper(type);
}
};
}]);
app.animation('view-enter', ['transitionService', function(transitionService) {
return transitionService.create('view-enter');
}]);
app.animation('view-leave', ['transitionService', function(transitionService) {
return transitionService.create('view-leave');
}]);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment