DefinitelyTyped/angularjs/angular-animate.d.ts at master · More4ever/DefinitelyTyped · GitHub

History

310 lines (271 loc) · 14.2 KB

Raw

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

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

// Type definitions for Angular JS 1.5 (ngAnimate module)

// Project: http://angularjs.org

// 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>

// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

/// <reference path="angular.d.ts" />

declare module "angular-animate" {

var _: string;

export = _;

}

/**

* ngAnimate module (angular-animate.js)

declare namespace angular.animate {

interface IAnimateFactory {

(...args: any[]): IAnimateCallbackObject;

}

interface IAnimateCallbackObject {

eventFn?: (element: JQuery, doneFunction: Function, options: IAnimationOptions) => any;

setClass?: (element: JQuery, addedClasses: string, removedClasses: string, doneFunction: Function, options: IAnimationOptions) => any;

addClass?: (element: JQuery, addedClasses: string, doneFunction: Function, options: IAnimationOptions) => any;

removeClass?: (element: JQuery, removedClasses: string, doneFunction: Function, options: IAnimationOptions) => any;

enter?: (element: JQuery, doneFunction: Function, options: IAnimationOptions) => any;

leave?: (element: JQuery, doneFunction: Function, options: IAnimationOptions) => any;

move?: (element: JQuery, doneFunction: Function, options: IAnimationOptions) => any;

animate?: (element: JQuery, fromStyles: string, toStyles: string, doneFunction: Function, options: IAnimationOptions) => any;

}

interface IAnimationPromise extends IPromise<void> {}

/**

* AnimateService

* see http://docs.angularjs.org/api/ngAnimate/service/$animate

interface IAnimateService {

/**

* Sets up an event listener to fire whenever the animation event has fired on the given element or among any of its children.

* @param event the animation event that will be captured (e.g. enter, leave, move, addClass, removeClass, etc...)

* @param container the container element that will capture each of the animation events that are fired on itself as well as among its children

* @param callback the callback function that will be fired when the listener is triggered

on(event: string, container: JQuery, callback: (element?: JQuery, phase?: string) => any): void;

/**

* Deregisters an event listener based on the event which has been associated with the provided element.

* @param event the animation event (e.g. enter, leave, move, addClass, removeClass, etc...)

* @param container the container element the event listener was placed on

* @param callback the callback function that was registered as the listener

off(event: string, container?: JQuery, callback?: (element?: JQuery, phase?: string) => any): void;

/**

* 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.

* @param element the external element that will be pinned

* @param parentElement the host parent element that will be associated with the external element

pin(element: JQuery, parentElement: JQuery): void;

/**

* Globally enables / disables animations.

* @param element If provided then the element will be used to represent the enable/disable operation.

* @param value If provided then set the animation on or off.

* @returns current animation state

enabled(value?: boolean): boolean;

enabled(element: JQuery, value?: boolean): boolean;

/**

* Cancels the provided animation.

cancel(animationPromise: IAnimationPromise): void;

/**

* Performs an inline animation on the element.

* @param element the element that will be the focus of the animation

* @param from a collection of CSS styles that will be applied to the element at the start of the animation

* @param to a collection of CSS styles that the element will animate towards

* @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')

* @param options an optional collection of styles that will be picked up by the CSS transition/animation

* @returns the animation callback promise

animate(element: JQuery, from: any, to: any, className?: string, options?: IAnimationOptions): IAnimationPromise;

/**

* Appends the element to the parentElement element that resides in the document and then runs the enter animation.

* @param element the element that will be the focus of the enter animation

* @param parentElement the parent element of the element that will be the focus of the enter animation

* @param afterElement the sibling element (which is the previous element) of the element that will be the focus of the enter animation

* @param options an optional collection of styles that will be picked up by the CSS transition/animation

* @returns the animation callback promise

enter(element: JQuery, parentElement: JQuery, afterElement?: JQuery, options?: IAnimationOptions): IAnimationPromise;

/**

* Runs the leave animation operation and, upon completion, removes the element from the DOM.

* @param element the element that will be the focus of the leave animation

* @param options an optional collection of styles that will be picked up by the CSS transition/animation

* @returns the animation callback promise

leave(element: JQuery, options?: IAnimationOptions): IAnimationPromise;

/**

* Fires the move DOM operation. Just before the animation starts, the animate service will either append

* it into the parentElement container or add the element directly after the afterElement element if present.

* Then the move animation will be run.

* @param element the element that will be the focus of the move animation

* @param parentElement the parent element of the element that will be the focus of the move animation

* @param afterElement the sibling element (which is the previous element) of the element that will be the focus of the move animation

* @returns the animation callback promise

move(element: JQuery, parentElement: JQuery, afterElement?: JQuery): IAnimationPromise;

/**

* Triggers a custom animation event based off the className variable and then attaches the className

* value to the element as a CSS class.

* @param element the element that will be animated

* @param className the CSS class that will be added to the element and then animated

* @param options an optional collection of styles that will be picked up by the CSS transition/animation

* @returns the animation callback promise

addClass(element: JQuery, className: string, options?: IAnimationOptions): IAnimationPromise;

/**

* Triggers a custom animation event based off the className variable and then removes the CSS class

* provided by the className value from the element.

* @param element the element that will be animated

* @param className the CSS class that will be animated and then removed from the element

* @param options an optional collection of styles that will be picked up by the CSS transition/animation

* @returns the animation callback promise

removeClass(element: JQuery, className: string, options?: IAnimationOptions): IAnimationPromise;

/**

* Adds and/or removes the given CSS classes to and from the element. Once complete, the done() callback

* will be fired (if provided).

* @param element the element which will have its CSS classes changed removed from it

* @param add the CSS classes which will be added to the element

* @param remove the CSS class which will be removed from the element CSS classes have been set on the element

* @param options an optional collection of styles that will be picked up by the CSS transition/animation

* @returns the animation callback promise

setClass(element: JQuery, add: string, remove: string, options?: IAnimationOptions): IAnimationPromise;

}

/**

* AnimateProvider

* see http://docs.angularjs.org/api/ngAnimate/provider/$animateProvider

interface IAnimateProvider {

/**

* Registers a new injectable animation factory function.

* @param name The name of the animation.

* @param factory The factory function that will be executed to return the animation object.

/**

* Gets and/or sets the CSS class expression that is checked when performing an animation.

* @param expression The className expression which will be checked against all animations.

* @returns The current CSS className expression value. If null then there is no expression value.

classNameFilter(expression?: RegExp): RegExp;

}

/**

* Angular Animation Options

* see https://docs.angularjs.org/api/ngAnimate/#applying-directive-specific-styles-to-an-animation

interface IAnimationOptions {

/**

* The DOM event (e.g. enter, leave, move). When used, a generated CSS class of ng-EVENT and

* ng-EVENT-active will be applied to the element during the animation. Multiple events can be provided when

* spaces are used as a separator. (Note that this will not perform any DOM operation.)

event?: string;

/**

* Indicates that the ng-prefix will be added to the event class. Setting to false or

* omitting will turn ng-EVENT and ng-EVENT-active in EVENT and EVENT-active. Unused if event is omitted.

structural?: boolean;

/**

* The CSS easing value that will be applied to the transition or keyframe animation (or both).

easing?: string;

/**

* The raw CSS transition style that will be used (e.g. 1s linear all).

transitionStyle?: string;

/**

* The raw CSS keyframe animation style that will be used (e.g. 1s my_animation linear).

keyframeStyle?: string;

/**

* The starting CSS styles (a key/value object) that will be applied at the start of the animation.

from?: Object;

/**

* The ending CSS styles (a key/value object) that will be applied across the animation via a CSS transition.

to?: Object;

/**

* A space separated list of CSS classes that will be added to the element and spread across the animation.

addClass?: string;

/**

* A space separated list of CSS classes that will be removed from the element and spread across

* the animation.

removeClass?: string;

/**

* A number value representing the total duration of the transition and/or keyframe (note that a value

* of 1 is 1000ms). If a value of 0 is provided then the animation will be skipped entirely.

duration?: number;

/**

* A number value representing the total delay of the transition and/or keyframe (note that a value of

* 1 is 1000ms). If a value of true is used then whatever delay value is detected from the CSS classes will be

* mirrored on the elements styles (e.g. by setting delay true then the style value of the element will be

* transition-delay: DETECTED_VALUE). Using true is useful when you want the CSS classes and inline styles to

* all share the same CSS delay value.

delay?: number;

/**

* A numeric time value representing the delay between successively animated elements (Click here to

* learn how CSS-based staggering works in ngAnimate.)

stagger?: number;

/**

* The numeric index representing the stagger item (e.g. a value of 5 is equal to the sixth item

* in the stagger; therefore when a stagger option value of 0.1 is used then there will be a stagger delay of 600ms)

staggerIndex?: number;

/**

* Whether or not the provided from and to styles will be removed once the animation is closed. This is useful for

* when the styles are used purely for the sake of the animation and do not have a lasting visual effect on the element

* (e.g. a colapse and open animation). By default this value is set to false.

cleanupStyles?: boolean;

}

interface IAnimateCssRunner {

/**

* Starts the animation

* @returns The animation runner with a done function for supplying a callback.

start(): IAnimateCssRunnerStart;

/**

* Ends (aborts) the animation

end(): void;

}

interface IAnimateCssRunnerStart extends IPromise<void> {

/**

* Allows you to add done callbacks to the running animation

* @param callbackFn: the callback function to be run

done(callbackFn: (animationFinished: boolean) => void): void;

}

/**

* AnimateCssService

* see http://docs.angularjs.org/api/ngAnimate/service/$animateCss

interface IAnimateCssService {

(element: JQuery, animateCssOptions: IAnimationOptions): IAnimateCssRunner;

}

declare module angular {

interface IModule {

animation(name: string, animationFactory: angular.animate.IAnimateFactory): IModule;

animation(name: string, inlineAnnotatedFunction: any[]): IModule;

animation(object: Object): IModule;

}

DefinitelyTyped/angularjs/angular-animate.d.ts at master · More4ever/DefinitelyTyped · GitHub

Expand file tree

Breadcrumbs

angular-animate.d.ts

Latest commit

History

Breadcrumbs

angular-animate.d.ts

File metadata and controls