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