UNPKG

16.2 kBTypeScriptView Raw
1// Type definitions for Angular JS (ngAnimate module) 1.5
2// Project: http://angularjs.org
3// Definitions by: Michel Salib <https://github.com/michelsalib>, Adi Dahiya <https://github.com/adidahiya>, Raphael Schweizer <https://github.com/rasch>, Cody Schaaf <https://github.com/codyschaaf>
4// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
5// TypeScript Version: 2.3
6
7declare var _: string;
8export = _;
9
10import * as angular from 'angular';
11
12declare module 'angular' {
13 /**
14 * ngAnimate module (angular-animate.js)
15 */
16 namespace animate {
17 interface IAnimateFactory {
18 (...args: any[]): IAnimateCallbackObject;
19 }
20
21 interface IAnimateCallbackObject {
22 eventFn?: ((element: JQuery, doneFunction: Function, options: IAnimationOptions) => any) | undefined;
23 beforeSetClass?: ((element: JQuery, addedClasses: string, removedClasses: string, doneFunction: Function, options: IAnimationOptions) => any) | undefined;
24 setClass?: ((element: JQuery, addedClasses: string, removedClasses: string, doneFunction: Function, options: IAnimationOptions) => any) | undefined;
25 beforeAddClass?: ((element: JQuery, addedClasses: string, doneFunction: Function, options: IAnimationOptions) => any) | undefined;
26 addClass?: ((element: JQuery, addedClasses: string, doneFunction: Function, options: IAnimationOptions) => any) | undefined;
27 beforeRemoveClass?: ((element: JQuery, removedClasses: string, doneFunction: Function, options: IAnimationOptions) => any) | undefined;
28 removeClass?: ((element: JQuery, removedClasses: string, doneFunction: Function, options: IAnimationOptions) => any) | undefined;
29 enter?: ((element: JQuery, doneFunction: Function, options: IAnimationOptions) => any) | undefined;
30 leave?: ((element: JQuery, doneFunction: Function, options: IAnimationOptions) => any) | undefined;
31 move?: ((element: JQuery, doneFunction: Function, options: IAnimationOptions) => any) | undefined;
32 animate?: ((element: JQuery, fromStyles: string, toStyles: string, doneFunction: Function, options: IAnimationOptions) => any) | undefined;
33 }
34
35 interface IAnimationPromise extends IPromise<void> { }
36
37 /**
38 * AnimateService
39 * see http://docs.angularjs.org/api/ngAnimate/service/$animate
40 */
41 interface IAnimateService {
42 /**
43 * Sets up an event listener to fire whenever the animation event has fired on the given element or among any of its children.
44 *
45 * @param event the animation event that will be captured (e.g. enter, leave, move, addClass, removeClass, etc...)
46 * @param container the container element that will capture each of the animation events that are fired on itself as well as among its children
47 * @param callback the callback function that will be fired when the listener is triggered
48 */
49 on(event: string, container: JQuery, callback: (element?: JQuery, phase?: string) => any): void;
50
51 /**
52 * Deregisters an event listener based on the event which has been associated with the provided element.
53 *
54 * @param event the animation event (e.g. enter, leave, move, addClass, removeClass, etc...)
55 * @param container the container element the event listener was placed on
56 * @param callback the callback function that was registered as the listener
57 */
58 off(event: string, container?: JQuery, callback?: (element?: JQuery, phase?: string) => any): void;
59
60 /**
61 * Associates the provided element with a host parent element to allow the element to be animated even if it exists outside of the DOM structure of the Angular application.
62 *
63 * @param element the external element that will be pinned
64 * @param parentElement the host parent element that will be associated with the external element
65 */
66 pin(element: JQuery, parentElement: JQuery): void;
67
68 /**
69 * Globally enables / disables animations.
70 *
71 * @param element If provided then the element will be used to represent the enable/disable operation.
72 * @param value If provided then set the animation on or off.
73 * @returns current animation state
74 */
75 enabled(element: JQuery, value?: boolean): boolean;
76 enabled(value?: boolean): boolean;
77
78 /**
79 * Cancels the provided animation.
80 */
81 cancel(animationPromise: IAnimationPromise): void;
82
83 /**
84 * Performs an inline animation on the element.
85 *
86 * @param element the element that will be the focus of the animation
87 * @param from a collection of CSS styles that will be applied to the element at the start of the animation
88 * @param to a collection of CSS styles that the element will animate towards
89 * @param className an optional CSS class that will be added to the element for the duration of the animation (the default class is 'ng-inline-animate')
90 * @param options an optional collection of styles that will be picked up by the CSS transition/animation
91 * @returns the animation callback promise
92 */
93 animate(element: JQuery, from: any, to: any, className?: string, options?: IAnimationOptions): IAnimationPromise;
94
95 /**
96 * Appends the element to the parentElement element that resides in the document and then runs the enter animation.
97 *
98 * @param element the element that will be the focus of the enter animation
99 * @param parentElement the parent element of the element that will be the focus of the enter animation
100 * @param afterElement the sibling element (which is the previous element) of the element that will be the focus of the enter animation
101 * @param options an optional collection of styles that will be picked up by the CSS transition/animation
102 * @returns the animation callback promise
103 */
104 enter(element: JQuery, parentElement: JQuery, afterElement?: JQuery, options?: IAnimationOptions): IAnimationPromise;
105
106 /**
107 * Runs the leave animation operation and, upon completion, removes the element from the DOM.
108 *
109 * @param element the element that will be the focus of the leave animation
110 * @param options an optional collection of styles that will be picked up by the CSS transition/animation
111 * @returns the animation callback promise
112 */
113 leave(element: JQuery, options?: IAnimationOptions): IAnimationPromise;
114
115 /**
116 * Fires the move DOM operation. Just before the animation starts, the animate service will either append
117 * it into the parentElement container or add the element directly after the afterElement element if present.
118 * Then the move animation will be run.
119 *
120 * @param element the element that will be the focus of the move animation
121 * @param parentElement the parent element of the element that will be the focus of the move animation
122 * @param afterElement the sibling element (which is the previous element) of the element that will be the focus of the move animation
123 * @returns the animation callback promise
124 */
125 move(element: JQuery, parentElement: JQuery, afterElement?: JQuery): IAnimationPromise;
126
127 /**
128 * Triggers a custom animation event based off the className variable and then attaches the className
129 * value to the element as a CSS class.
130 *
131 * @param element the element that will be animated
132 * @param className the CSS class that will be added to the element and then animated
133 * @param options an optional collection of styles that will be picked up by the CSS transition/animation
134 * @returns the animation callback promise
135 */
136 addClass(element: JQuery, className: string, options?: IAnimationOptions): IAnimationPromise;
137
138 /**
139 * Triggers a custom animation event based off the className variable and then removes the CSS class
140 * provided by the className value from the element.
141 *
142 * @param element the element that will be animated
143 * @param className the CSS class that will be animated and then removed from the element
144 * @param options an optional collection of styles that will be picked up by the CSS transition/animation
145 * @returns the animation callback promise
146 */
147 removeClass(element: JQuery, className: string, options?: IAnimationOptions): IAnimationPromise;
148
149 /**
150 * Adds and/or removes the given CSS classes to and from the element. Once complete, the done() callback
151 * will be fired (if provided).
152 *
153 * @param element the element which will have its CSS classes changed removed from it
154 * @param add the CSS classes which will be added to the element
155 * @param remove the CSS class which will be removed from the element CSS classes have been set on the element
156 * @param options an optional collection of styles that will be picked up by the CSS transition/animation
157 * @returns the animation callback promise
158 */
159 setClass(element: JQuery, add: string, remove: string, options?: IAnimationOptions): IAnimationPromise;
160 }
161
162 /**
163 * AnimateProvider
164 * see http://docs.angularjs.org/api/ngAnimate/provider/$animateProvider
165 */
166 interface IAnimateProvider {
167 /**
168 * Registers a new injectable animation factory function.
169 *
170 * @param name The name of the animation.
171 * @param factory The factory function that will be executed to return the animation object.
172 */
173 register(name: string, factory: IAnimateFactory): void;
174
175 /**
176 * Gets and/or sets the CSS class expression that is checked when performing an animation.
177 *
178 * @param expression The className expression which will be checked against all animations.
179 * @returns The current CSS className expression value. If null then there is no expression value.
180 */
181 classNameFilter(expression?: RegExp): RegExp;
182 }
183
184 /**
185 * Angular Animation Options
186 * see https://docs.angularjs.org/api/ngAnimate/#applying-directive-specific-styles-to-an-animation
187 */
188 interface IAnimationOptions {
189 /**
190 * The DOM event (e.g. enter, leave, move). When used, a generated CSS class of ng-EVENT and
191 * ng-EVENT-active will be applied to the element during the animation. Multiple events can be provided when
192 * spaces are used as a separator. (Note that this will not perform any DOM operation.)
193 */
194 event?: string | undefined;
195
196 /**
197 * Indicates that the ng-prefix will be added to the event class. Setting to false or
198 * omitting will turn ng-EVENT and ng-EVENT-active in EVENT and EVENT-active. Unused if event is omitted.
199 */
200 structural?: boolean | undefined;
201
202 /**
203 * The CSS easing value that will be applied to the transition or keyframe animation (or both).
204 */
205 easing?: string | undefined;
206
207 /**
208 * The raw CSS transition style that will be used (e.g. 1s linear all).
209 */
210 transitionStyle?: string | undefined;
211
212 /**
213 * The raw CSS keyframe animation style that will be used (e.g. 1s my_animation linear).
214 */
215 keyframeStyle?: string | undefined;
216
217 /**
218 * The starting CSS styles (a key/value object) that will be applied at the start of the animation.
219 */
220 from?: Object | undefined;
221
222 /**
223 * The ending CSS styles (a key/value object) that will be applied across the animation via a CSS transition.
224 */
225 to?: Object | undefined;
226
227 /**
228 * A space separated list of CSS classes that will be added to the element and spread across the animation.
229 */
230 addClass?: string | undefined;
231
232 /**
233 * A space separated list of CSS classes that will be removed from the element and spread across
234 * the animation.
235 */
236 removeClass?: string | undefined;
237
238 /**
239 * A number value representing the total duration of the transition and/or keyframe (note that a value
240 * of 1 is 1000ms). If a value of 0 is provided then the animation will be skipped entirely.
241 */
242 duration?: number | undefined;
243
244 /**
245 * A number value representing the total delay of the transition and/or keyframe (note that a value of
246 * 1 is 1000ms). If a value of true is used then whatever delay value is detected from the CSS classes will be
247 * mirrored on the elements styles (e.g. by setting delay true then the style value of the element will be
248 * transition-delay: DETECTED_VALUE). Using true is useful when you want the CSS classes and inline styles to
249 * all share the same CSS delay value.
250 */
251 delay?: number | undefined;
252
253 /**
254 * A numeric time value representing the delay between successively animated elements (Click here to
255 * learn how CSS-based staggering works in ngAnimate.)
256 */
257 stagger?: number | undefined;
258
259 /**
260 * The numeric index representing the stagger item (e.g. a value of 5 is equal to the sixth item
261 * in the stagger; therefore when a stagger option value of 0.1 is used then there will be a stagger delay of 600ms)
262 *
263 */
264 staggerIndex?: number | undefined;
265
266 /**
267 * Whether or not the provided from and to styles will be removed once the animation is closed. This is useful for
268 * when the styles are used purely for the sake of the animation and do not have a lasting visual effect on the element
269 * (e.g. a colapse and open animation). By default this value is set to false.
270 */
271 cleanupStyles?: boolean | undefined;
272 }
273
274 interface IAnimateCssRunner {
275 /**
276 * Starts the animation
277 *
278 * @returns The animation runner with a done function for supplying a callback.
279 */
280 start(): IAnimateCssRunnerStart;
281
282 /**
283 * Ends (aborts) the animation
284 */
285 end(): void;
286 }
287
288 interface IAnimateCssRunnerStart extends IPromise<void> {
289 /**
290 * Allows you to add done callbacks to the running animation
291 *
292 * @param callbackFn: the callback function to be run
293 */
294 done(callbackFn: (animationFinished: boolean) => void): void;
295 }
296
297 /**
298 * AnimateCssService
299 * see http://docs.angularjs.org/api/ngAnimate/service/$animateCss
300 */
301 interface IAnimateCssService {
302 (element: JQuery, animateCssOptions: IAnimationOptions): IAnimateCssRunner;
303 }
304 }
305
306 interface IModule {
307 animation(name: string, animationFactory: angular.animate.IAnimateFactory): IModule;
308 animation(name: string, inlineAnnotatedFunction: any[]): IModule;
309 animation(object: Object): IModule;
310 }
311}
312
\No newline at end of file