Update velocity-animate.d.ts for latest Velocity

This commit is contained in:
Greg Smith
2015-08-10 13:40:42 -05:00
parent 3b0f362204
commit 52854d5f1c
2 changed files with 136 additions and 39 deletions
@@ -293,3 +293,62 @@ function advanced_utility_function () {
options: { duration: 1500 }
});
}
function ui_pack_sequence_running() {
var $element1: JQuery;
var $element2: JQuery;
var $element3: JQuery;
$element1.velocity({ translateX: 100 }, 1000, function() {
$element2.velocity({ translateX: 200 }, 1000, function() {
$element3.velocity({ translateX: 300 }, 1000);
});
});
var mySequence = [
{ e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
{ e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },
{ e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];
$.Velocity.RunSequence(mySequence);
var mySequence2 = [
{ e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
/* The call below will run at the same time as the first call. */
{ e: $element2, p: { translateX: 200 }, o: { duration: 1000, sequenceQueue: false } },
/* As normal, the call below will run once the second call is complete. */
{ e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];
$.Velocity.RunSequence(mySequence2);
}
function ui_pack_registration() {
var $element: JQuery;
$.Velocity.RegisterEffect("callout.pulse", {
defaultDuration: 900,
calls: [
[ { scaleX: 1.1 }, 0.50 ],
[ { scaleX: 1 }, 0.50 ]
]
});
$element.velocity("callout.pulse");
$.Velocity
.RegisterEffect("transition.flipXIn", {
defaultDuration: 700,
calls: [
[ { opacity: 1, rotateY: [ 0, -55 ] } ]
]
})
.RegisterEffect("transition.flipXOut", {
defaultDuration: 700,
calls: [
[ { opacity: 0, rotateY: 55 } ]
],
reset: { rotateY: 0 }
});
$element
.velocity("transition.flipXIn")
.velocity("transition.flipXOut", { delay: 1000 });
}
+77 -39
View File
@@ -1,4 +1,4 @@
// Type definitions for Velocity 0.0.22
// Type definitions for Velocity 1.2.2
// Project: http://velocityjs.org/
// Definitions by: Greg Smith <https://github.com/smrq/>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
@@ -6,14 +6,13 @@
/// <reference path="../jquery/jquery.d.ts" />
interface JQuery {
velocity(options: {properties: Object; options: jquery.velocity.VelocityOptions}): JQuery;
velocity(properties: Object, options: jquery.velocity.VelocityOptions): JQuery;
velocity(properties: Object, duration?: number, easing?: string, complete?: jquery.velocity.ElementCallback): JQuery;
velocity(properties: Object, duration?: number, easing?: number[], complete?: jquery.velocity.ElementCallback): JQuery;
velocity(properties: Object, duration?: number, complete?: jquery.velocity.ElementCallback): JQuery;
velocity(properties: Object, easing?: string, complete?: jquery.velocity.ElementCallback): JQuery;
velocity(properties: Object, easing?: number[], complete?: jquery.velocity.ElementCallback): JQuery;
velocity(properties: Object, complete?: jquery.velocity.ElementCallback): JQuery;
velocity(name: string, options: jquery.velocity.RegisteredEffectOptions): JQuery;
velocity(options: {properties: jquery.velocity.Properties; options: jquery.velocity.Options}): JQuery;
velocity(properties: jquery.velocity.Properties, options: jquery.velocity.Options): JQuery;
velocity(properties: jquery.velocity.Properties, duration: number, easing: jquery.velocity.Easing, complete?: jquery.velocity.ElementCallback): JQuery;
velocity(properties: jquery.velocity.Properties, duration: number, complete?: jquery.velocity.ElementCallback): JQuery;
velocity(properties: jquery.velocity.Properties, easing: jquery.velocity.Easing, complete?: jquery.velocity.ElementCallback): JQuery;
velocity(properties: jquery.velocity.Properties, complete?: jquery.velocity.ElementCallback): JQuery;
}
interface JQueryStatic {
@@ -21,42 +20,81 @@ interface JQueryStatic {
}
declare module jquery.velocity {
interface ElementCallback {
(elements: NodeListOf<HTMLElement>): void;
type Properties = Object;
type Easing = string|number[];
type ElementCallback = (elements: NodeListOf<HTMLElement>) => void;
type ProgressCallback = (elements: NodeListOf<HTMLElement>, percentComplete: number, timeRemaining: number, timeStart: number) => void;
type EffectCall =
[Properties] |
[Properties, number] |
[Properties, EffectCallOptions] |
[Properties, number, EffectCallOptions];
interface EffectCallOptions {
delay?: any;
easing?: any;
}
interface ProgressCallback {
(elements: NodeListOf<HTMLElement>, percentComplete: number, timeRemaining: number, timeStart: number): void;
interface Options {
queue?: string|boolean;
duration?: string|number;
easing?: Easing;
begin?: ElementCallback;
complete?: ElementCallback;
progress?: ProgressCallback;
display?: string|boolean;
loop?: number|boolean;
delay?: number|boolean;
mobileHA?: boolean;
_cacheValues?: boolean;
}
interface RegisterEffectOptions {
defaultDuration?: number;
calls: EffectCall[];
reset?: Object;
}
interface RegisteredEffectOptions {
duration?: string|number;
begin?: ElementCallback;
complete?: ElementCallback;
display?: string;
delay?: number;
mobileHA?: boolean;
_cacheValues?: boolean;
stagger?: number;
drag?: boolean;
backwards?: boolean;
}
interface SequenceCall {
e: HTMLElement|JQuery;
p: Properties;
o: SequenceOptions;
}
interface SequenceOptions extends Options {
sequenceQueue?: boolean;
}
interface VelocityStatic {
Sequences: any;
animate(options: {elements: NodeListOf<HTMLElement>; properties: Object; options: VelocityOptions}): void;
animate(elements: NodeListOf<HTMLElement>, properties: Object, options: VelocityOptions): void;
animate(element: HTMLElement, properties: Object, options: VelocityOptions): void;
/**
* Get a hook value. Hooks are the subvalues of multi-value CSS properties.
* It features the same API as $.css().
*/
hook(element: HTMLElement|JQuery, cssKey: string): string;
/**
* Set a hook value. Hooks are the subvalues of multi-value CSS properties.
* It features the same API as $.css().
*/
hook(element: HTMLElement|JQuery, cssKey: string, cssValue: string): void;
}
animate(options: {elements: NodeListOf<HTMLElement>; properties: Properties; options: Options}): any;
animate(elements: HTMLElement|NodeListOf<HTMLElement>, properties: Properties, options: Options): any;
RegisterEffect(name: string, options: RegisterEffectOptions): VelocityStatic;
RunSequence(sequence: SequenceCall[]): VelocityStatic;
interface VelocityOptions {
queue?: any;
duration?: any;
easing?: any;
begin?: ElementCallback;
complete?: ElementCallback;
progress?: ProgressCallback;
display?: any;
loop?: any;
delay?: any;
mobileHA?: boolean;
_cacheValues?: boolean;
/**
* Get a hook value. Hooks are the subvalues of multi-value CSS properties.
* It features the same API as $.css().
*/
hook(element: HTMLElement|JQuery, cssKey: string): string;
/**
* Set a hook value. Hooks are the subvalues of multi-value CSS properties.
* It features the same API as $.css().
*/
hook(element: HTMLElement|JQuery, cssKey: string, cssValue: string): void;
}
}