4 angular.module('foundation.core.animation', [])
5 .service('FoundationAnimation', FoundationAnimation)
8 function FoundationAnimation() {
12 var initClasses = ['ng-enter', 'ng-leave'];
13 var activeClasses = ['ng-enter-active', 'ng-leave-active'];
14 var activeGenericClass = 'is-active';
16 'webkitAnimationEnd', 'mozAnimationEnd',
17 'MSAnimationEnd', 'oanimationend',
18 'animationend', 'webkitTransitionEnd',
19 'otransitionend', 'transitionend'
22 service.animate = animate;
23 service.toggleAnimation = toggleAnimation;
27 function toggleAnimation(element, futureState) {
29 element.addClass(activeGenericClass);
31 element.removeClass(activeGenericClass);
35 function animate(element, futureState, animationIn, animationOut) {
38 self.cancelAnimation = cancelAnimation;
40 var animationClass = futureState ? animationIn: animationOut;
41 var activation = futureState;
42 var initClass = activation ? initClasses[0] : initClasses[1];
43 var activeClass = activation ? activeClasses[0] : activeClasses[1];
45 registerElement(element);
47 element.addClass(animationClass);
48 element.addClass(initClass);
50 element.addClass(activeGenericClass);
56 element[0].style.transitionDuration = '';
57 element.addClass(activeClass);
59 element.one(events.join(' '), function() {
63 setTimeout(function() {
69 function finishAnimation() {
70 deregisterElement(element);
71 reset(); //reset all classes
72 element[0].style.transitionDuration = '';
73 element.removeClass(!activation ? activeGenericClass : ''); //if not active, remove active class
79 function cancelAnimation(element) {
80 deregisterElement(element);
81 angular.element(element).off(events.join(' ')); //kill all animation event handlers
85 function registerElement(el) {
91 //kill in progress animations
92 var inProgress = animations.filter(function(obj) {
95 if(inProgress.length > 0) {
96 var target = inProgress[0].el[0];
98 inProgress[0].animation.cancelAnimation(target);
101 animations.push(elObj);
104 function deregisterElement(el) {
106 var currentAnimation = animations.filter(function(obj, ind) {
113 animations.splice(index, 1);
119 return element[0].offsetWidth;
123 element[0].style.transitionDuration = 0;
124 element.removeClass(initClasses.join(' ') + ' ' + activeClasses.join(' ') + ' ' + animationIn + ' ' + animationOut);