1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
(function() {
'use strict';
angular.module('foundation.core.animation', [])
.service('FoundationAnimation', FoundationAnimation)
;
function FoundationAnimation() {
var animations = [];
var service = {};
var initClasses = ['ng-enter', 'ng-leave'];
var activeClasses = ['ng-enter-active', 'ng-leave-active'];
var activeGenericClass = 'is-active';
var events = [
'webkitAnimationEnd', 'mozAnimationEnd',
'MSAnimationEnd', 'oanimationend',
'animationend', 'webkitTransitionEnd',
'otransitionend', 'transitionend'
];
service.animate = animate;
service.toggleAnimation = toggleAnimation;
return service;
function toggleAnimation(element, futureState) {
if(futureState) {
element.addClass(activeGenericClass);
} else {
element.removeClass(activeGenericClass);
}
}
function animate(element, futureState, animationIn, animationOut) {
var timedOut = true;
var self = this;
self.cancelAnimation = cancelAnimation;
var animationClass = futureState ? animationIn: animationOut;
var activation = futureState;
var initClass = activation ? initClasses[0] : initClasses[1];
var activeClass = activation ? activeClasses[0] : activeClasses[1];
//stop animation
registerElement(element);
reset();
element.addClass(animationClass);
element.addClass(initClass);
element.addClass(activeGenericClass);
//force a "tick"
reflow();
//activate
element[0].style.transitionDuration = '';
element.addClass(activeClass);
element.one(events.join(' '), function() {
finishAnimation();
});
setTimeout(function() {
if(timedOut) {
finishAnimation();
}
}, 3000);
function finishAnimation() {
deregisterElement(element);
reset(); //reset all classes
element[0].style.transitionDuration = '';
element.removeClass(!activation ? activeGenericClass : ''); //if not active, remove active class
reflow();
timedOut = false;
}
function cancelAnimation(element) {
deregisterElement(element);
angular.element(element).off(events.join(' ')); //kill all animation event handlers
timedOut = false;
}
function registerElement(el) {
var elObj = {
el: el,
animation: self
};
//kill in progress animations
var inProgress = animations.filter(function(obj) {
return obj.el === el;
});
if(inProgress.length > 0) {
var target = inProgress[0].el[0];
inProgress[0].animation.cancelAnimation(target);
}
animations.push(elObj);
}
function deregisterElement(el) {
var index;
var currentAnimation = animations.filter(function(obj, ind) {
if(obj.el === el) {
index = ind;
}
});
if(index >= 0) {
animations.splice(index, 1);
}
}
function reflow() {
return element[0].offsetWidth;
}
function reset() {
element[0].style.transitionDuration = 0;
element.removeClass(initClasses.join(' ') + ' ' + activeClasses.join(' ') + ' ' + animationIn + ' ' + animationOut);
}
}
}
})();
|
