update animation library "velocity"
This commit is contained in:
Felix Niklas
parent
d5419fcf22
commit
5c14424437
2 changed files with 203 additions and 121 deletions
File diff suppressed because one or more lines are too long
|
|
@ -2,11 +2,11 @@
|
|||
Velocity UI Pack
|
||||
**********************/
|
||||
|
||||
/* VelocityJS.org UI Pack (4.1.4). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */
|
||||
/* VelocityJS.org UI Pack (5.0.2). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */
|
||||
|
||||
;(function (factory) {
|
||||
/* CommonJS module. */
|
||||
if (typeof module === "object" && typeof module.exports === "object") {
|
||||
if (typeof require === "function" && typeof exports === "object" ) {
|
||||
module.exports = factory();
|
||||
/* AMD module. */
|
||||
} else if (typeof define === "function" && define.amd) {
|
||||
|
|
@ -18,32 +18,61 @@
|
|||
}(function() {
|
||||
return function (global, window, document, undefined) {
|
||||
|
||||
/**************
|
||||
/*************
|
||||
Checks
|
||||
**************/
|
||||
*************/
|
||||
|
||||
if (!global.Velocity || !global.Velocity.Utilities) {
|
||||
window.console && console.log("Velocity UI Pack: Velocity must be loaded first. Aborting.");
|
||||
return;
|
||||
} else if (!global.Velocity.version || (global.Velocity.version.major <= 0 && global.Velocity.version.minor <= 11 && global.Velocity.version.patch < 8)) {
|
||||
var abortError = "Velocity UI Pack: You need to update Velocity (jquery.velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.";
|
||||
} else {
|
||||
var Velocity = global.Velocity,
|
||||
$ = Velocity.Utilities;
|
||||
}
|
||||
|
||||
var velocityVersion = Velocity.version,
|
||||
requiredVersion = { major: 1, minor: 1, patch: 0 };
|
||||
|
||||
function greaterSemver (primary, secondary) {
|
||||
var versionInts = [];
|
||||
|
||||
if (!primary || !secondary) { return false; }
|
||||
|
||||
$.each([ primary, secondary ], function(i, versionObject) {
|
||||
var versionIntsComponents = [];
|
||||
|
||||
$.each(versionObject, function(component, value) {
|
||||
while (value.toString().length < 5) {
|
||||
value = "0" + value;
|
||||
}
|
||||
versionIntsComponents.push(value);
|
||||
});
|
||||
|
||||
versionInts.push(versionIntsComponents.join(""))
|
||||
});
|
||||
|
||||
return (parseFloat(versionInts[0]) > parseFloat(versionInts[1]));
|
||||
}
|
||||
|
||||
if (greaterSemver(requiredVersion, velocityVersion)){
|
||||
var abortError = "Velocity UI Pack: You need to update Velocity (jquery.velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.";
|
||||
alert(abortError);
|
||||
throw new Error(abortError);
|
||||
}
|
||||
|
||||
/******************
|
||||
Register UI
|
||||
******************/
|
||||
/************************
|
||||
Effect Registration
|
||||
************************/
|
||||
|
||||
global.Velocity.RegisterUI = function (effectName, properties) {
|
||||
/* Note: RegisterUI is a legacy name. */
|
||||
Velocity.RegisterEffect = Velocity.RegisterUI = function (effectName, properties) {
|
||||
/* Animate the expansion/contraction of the elements' parent's height for In/Out effects. */
|
||||
function animateParentHeight (elements, direction, totalDuration, stagger) {
|
||||
var totalHeightDelta = 0,
|
||||
parentNode;
|
||||
|
||||
/* Sum the total height (including padding and margin) of all targeted elements. */
|
||||
global.Velocity.Utilities.each(elements.nodeType ? [ elements ] : elements, function(i, element) {
|
||||
$.each(elements.nodeType ? [ elements ] : elements, function(i, element) {
|
||||
if (stagger) {
|
||||
/* Increase the totalDuration by the successive delay amounts produced by the stagger option. */
|
||||
totalDuration += i * stagger;
|
||||
|
|
@ -51,84 +80,99 @@ return function (global, window, document, undefined) {
|
|||
|
||||
parentNode = element.parentNode;
|
||||
|
||||
global.Velocity.Utilities.each([ "height", "paddingTop", "paddingBottom", "marginTop", "marginBottom"], function(i, property) {
|
||||
totalHeightDelta += parseFloat(global.Velocity.CSS.getPropertyValue(element, property));
|
||||
$.each([ "height", "paddingTop", "paddingBottom", "marginTop", "marginBottom"], function(i, property) {
|
||||
totalHeightDelta += parseFloat(Velocity.CSS.getPropertyValue(element, property));
|
||||
});
|
||||
});
|
||||
|
||||
/* Animate the parent element's height adjustment (with a varying duration multiplier for aesthetic benefits). */
|
||||
global.Velocity.animate(
|
||||
Velocity.animate(
|
||||
parentNode,
|
||||
{ height: (direction === "In" ? "+" : "-") + "=" + totalHeightDelta },
|
||||
{ queue: false, easing: "ease-in-out", duration: totalDuration * (direction === "In" ? 0.6 : 1) }
|
||||
);
|
||||
}
|
||||
|
||||
/* Register a custom sequence for each effect. */
|
||||
global.Velocity.Sequences[effectName] = function (element, sequenceOptions, elementsIndex, elementsSize, elements, promiseData) {
|
||||
/* Register a custom redirect for each effect. */
|
||||
Velocity.Redirects[effectName] = function (element, redirectOptions, elementsIndex, elementsSize, elements, promiseData) {
|
||||
var finalElement = (elementsIndex === elementsSize - 1);
|
||||
|
||||
if (typeof properties.defaultDuration === "function") {
|
||||
properties.defaultDuration = properties.defaultDuration.call(elements, elements);
|
||||
} else {
|
||||
properties.defaultDuration = parseFloat(properties.defaultDuration);
|
||||
}
|
||||
|
||||
/* Iterate through each effect's call array. */
|
||||
for (var callIndex = 0; callIndex < properties.calls.length; callIndex++) {
|
||||
var call = properties.calls[callIndex],
|
||||
propertyMap = call[0],
|
||||
sequenceDuration = (sequenceOptions.duration || properties.defaultDuration || 1000),
|
||||
redirectDuration = (redirectOptions.duration || properties.defaultDuration || 1000),
|
||||
durationPercentage = call[1],
|
||||
callOptions = call[2] || {},
|
||||
opts = {};
|
||||
|
||||
/* Assign the whitelisted per-call options. */
|
||||
opts.duration = sequenceDuration * (durationPercentage || 1);
|
||||
opts.queue = sequenceOptions.queue || "";
|
||||
opts.duration = redirectDuration * (durationPercentage || 1);
|
||||
opts.queue = redirectOptions.queue || "";
|
||||
opts.easing = callOptions.easing || "ease";
|
||||
opts.delay = callOptions.delay || 0;
|
||||
opts.delay = parseFloat(callOptions.delay) || 0;
|
||||
opts._cacheValues = callOptions._cacheValues || true;
|
||||
|
||||
/* Special processing for the first effect call. */
|
||||
if (callIndex === 0) {
|
||||
/* If a delay was passed into the sequence, combine it with the first call's delay. */
|
||||
opts.delay += (sequenceOptions.delay || 0);
|
||||
/* If a delay was passed into the redirect, combine it with the first call's delay. */
|
||||
opts.delay += (parseFloat(redirectOptions.delay) || 0);
|
||||
|
||||
if (elementsIndex === 0) {
|
||||
opts.begin = function() {
|
||||
/* Only trigger a begin callback on the first effect call with the first element in the set. */
|
||||
sequenceOptions.begin && sequenceOptions.begin.call(elements, elements);
|
||||
redirectOptions.begin && redirectOptions.begin.call(elements, elements);
|
||||
|
||||
var direction = effectName.match(/(In|Out)$/);
|
||||
|
||||
/* Make "in" transitioning elements invisible immediately so that there's no FOUC between now
|
||||
and the first RAF tick. */
|
||||
if ((direction && direction[0] === "In") && propertyMap.opacity !== undefined) {
|
||||
$.each(elements.nodeType ? [ elements ] : elements, function(i, element) {
|
||||
Velocity.CSS.setPropertyValue(element, "opacity", 0);
|
||||
});
|
||||
}
|
||||
|
||||
/* Only trigger animateParentHeight() if we're using an In/Out transition. */
|
||||
var direction = effectName.match(/(In|Out)$/);
|
||||
if (sequenceOptions.animateParentHeight && direction) {
|
||||
animateParentHeight(elements, direction[0], sequenceDuration + opts.delay, sequenceOptions.stagger);
|
||||
if (redirectOptions.animateParentHeight && direction) {
|
||||
animateParentHeight(elements, direction[0], redirectDuration + opts.delay, redirectOptions.stagger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* If the user isn't overriding the display option, default to "auto" for "In"-suffixed transitions. */
|
||||
if (sequenceOptions.display !== null) {
|
||||
if (sequenceOptions.display !== undefined && sequenceOptions.display !== "none") {
|
||||
opts.display = sequenceOptions.display;
|
||||
if (redirectOptions.display !== null) {
|
||||
if (redirectOptions.display !== undefined && redirectOptions.display !== "none") {
|
||||
opts.display = redirectOptions.display;
|
||||
} else if (/In$/.test(effectName)) {
|
||||
/* Inline elements cannot be subjected to transforms, so we switch them to inline-block. */
|
||||
var defaultDisplay = global.Velocity.CSS.Values.getDisplayType(element);
|
||||
var defaultDisplay = Velocity.CSS.Values.getDisplayType(element);
|
||||
opts.display = (defaultDisplay === "inline") ? "inline-block" : defaultDisplay;
|
||||
}
|
||||
}
|
||||
|
||||
if (sequenceOptions.visibility && sequenceOptions.visibility !== "hidden") {
|
||||
opts.visibility = sequenceOptions.visibility;
|
||||
if (redirectOptions.visibility && redirectOptions.visibility !== "hidden") {
|
||||
opts.visibility = redirectOptions.visibility;
|
||||
}
|
||||
}
|
||||
|
||||
/* Special processing for the last effect call. */
|
||||
if (callIndex === properties.calls.length - 1) {
|
||||
/* Append promise resolving onto the user's sequence callback. */
|
||||
/* Append promise resolving onto the user's redirect callback. */
|
||||
function injectFinalCallbacks () {
|
||||
if ((sequenceOptions.display === undefined || sequenceOptions.display === "none") && /Out$/.test(effectName)) {
|
||||
global.Velocity.Utilities.each(elements.nodeType ? [ elements ] : elements, function(i, element) {
|
||||
global.Velocity.CSS.setPropertyValue(element, "display", "none");
|
||||
if ((redirectOptions.display === undefined || redirectOptions.display === "none") && /Out$/.test(effectName)) {
|
||||
$.each(elements.nodeType ? [ elements ] : elements, function(i, element) {
|
||||
Velocity.CSS.setPropertyValue(element, "display", "none");
|
||||
});
|
||||
}
|
||||
|
||||
sequenceOptions.complete && sequenceOptions.complete.call(elements, elements);
|
||||
redirectOptions.complete && redirectOptions.complete.call(elements, elements);
|
||||
|
||||
if (promiseData) {
|
||||
promiseData.resolver(elements || element);
|
||||
|
|
@ -142,7 +186,8 @@ return function (global, window, document, undefined) {
|
|||
|
||||
/* Format each non-array value in the reset property map to [ value, value ] so that changes apply
|
||||
immediately and DOM querying is avoided (via forcefeeding). */
|
||||
if (typeof resetValue === "string" || typeof resetValue === "number") {
|
||||
/* Note: Don't forcefeed hooks, otherwise their hook roots will be defaulted to their null values. */
|
||||
if (Velocity.CSS.Hooks.registered[resetProperty] === undefined && (typeof resetValue === "string" || typeof resetValue === "number")) {
|
||||
properties.reset[resetProperty] = [ properties.reset[resetProperty], properties.reset[resetProperty] ];
|
||||
}
|
||||
}
|
||||
|
|
@ -155,24 +200,24 @@ return function (global, window, document, undefined) {
|
|||
resetOptions.complete = injectFinalCallbacks;
|
||||
}
|
||||
|
||||
global.Velocity.animate(element, properties.reset, resetOptions);
|
||||
Velocity.animate(element, properties.reset, resetOptions);
|
||||
/* Only trigger the user's complete callback on the last effect call with the last element in the set. */
|
||||
} else if (finalElement) {
|
||||
injectFinalCallbacks();
|
||||
}
|
||||
};
|
||||
|
||||
if (sequenceOptions.visibility === "hidden") {
|
||||
opts.visibility = sequenceOptions.visibility;
|
||||
if (redirectOptions.visibility === "hidden") {
|
||||
opts.visibility = redirectOptions.visibility;
|
||||
}
|
||||
}
|
||||
|
||||
global.Velocity.animate(element, propertyMap, opts);
|
||||
Velocity.animate(element, propertyMap, opts);
|
||||
}
|
||||
};
|
||||
|
||||
/* Return the Velocity object so that RegisterUI calls can be chained. */
|
||||
return global.Velocity;
|
||||
return Velocity;
|
||||
};
|
||||
|
||||
/*********************
|
||||
|
|
@ -181,7 +226,7 @@ return function (global, window, document, undefined) {
|
|||
|
||||
/* Externalize the packagedEffects data so that they can optionally be modified and re-registered. */
|
||||
/* Support: <=IE8: Callouts will have no effect, and transitions will simply fade in/out. IE9/Android 2.3: Most effects are fully supported, the rest fade in/out. All other browsers: full support. */
|
||||
global.Velocity.RegisterUI.packagedEffects =
|
||||
Velocity.RegisterEffect.packagedEffects =
|
||||
{
|
||||
/* Animate.css */
|
||||
"callout.bounce": {
|
||||
|
|
@ -221,7 +266,7 @@ return function (global, window, document, undefined) {
|
|||
"callout.pulse": {
|
||||
defaultDuration: 825,
|
||||
calls: [
|
||||
[ { scaleX: 1.1, scaleY: 1.1 }, 0.50 ],
|
||||
[ { scaleX: 1.1, scaleY: 1.1 }, 0.50, { easing: "easeInExpo" } ],
|
||||
[ { scaleX: 1, scaleY: 1 }, 0.50 ]
|
||||
]
|
||||
},
|
||||
|
|
@ -356,28 +401,28 @@ return function (global, window, document, undefined) {
|
|||
/* Magic.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */
|
||||
"transition.whirlIn": {
|
||||
defaultDuration: 900,
|
||||
defaultDuration: 850,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 0 ], scaleY: [ 1, 0 ], rotateY: [ 0, 160 ] } ]
|
||||
[ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 0 ], scaleY: [ 1, 0 ], rotateY: [ 0, 160 ] }, 1, { easing: "easeInOutSine" } ]
|
||||
]
|
||||
},
|
||||
/* Magic.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */
|
||||
"transition.whirlOut": {
|
||||
defaultDuration: 900,
|
||||
defaultDuration: 750,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 0, scaleY: 0, rotateY: 160 } ]
|
||||
[ { opacity: [ 0, "easeInOutQuint", 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 0, scaleY: 0, rotateY: 160 }, 1, { easing: "swing" } ]
|
||||
],
|
||||
reset: { scaleX: 1, scaleY: 1, rotateY: 0 }
|
||||
},
|
||||
"transition.shrinkIn": {
|
||||
defaultDuration: 700,
|
||||
defaultDuration: 750,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 1.5 ], scaleY: [ 1, 1.5 ], translateZ: 0 } ]
|
||||
]
|
||||
},
|
||||
"transition.shrinkOut": {
|
||||
defaultDuration: 650,
|
||||
defaultDuration: 600,
|
||||
calls: [
|
||||
[ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 1.3, scaleY: 1.3, translateZ: 0 } ]
|
||||
],
|
||||
|
|
@ -409,9 +454,9 @@ return function (global, window, document, undefined) {
|
|||
"transition.bounceOut": {
|
||||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { scaleX: 0.95, scaleY: 0.95 }, 0.40 ],
|
||||
[ { scaleX: 1.1, scaleY: 1.1, translateZ: 0 }, 0.40 ],
|
||||
[ { opacity: [ 0, 1 ], scaleX: 0.3, scaleY: 0.3 }, 0.20 ]
|
||||
[ { scaleX: 0.95, scaleY: 0.95 }, 0.35 ],
|
||||
[ { scaleX: 1.1, scaleY: 1.1, translateZ: 0 }, 0.35 ],
|
||||
[ { opacity: [ 0, 1 ], scaleX: 0.3, scaleY: 0.3 }, 0.30 ]
|
||||
],
|
||||
reset: { scaleX: 1, scaleY: 1 }
|
||||
},
|
||||
|
|
@ -596,8 +641,7 @@ return function (global, window, document, undefined) {
|
|||
defaultDuration: 800,
|
||||
calls: [
|
||||
[ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ "100%", "100%" ], rotateX: [ 0, -180 ] } ]
|
||||
],
|
||||
reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
|
||||
]
|
||||
},
|
||||
/* Magic.css */
|
||||
/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
|
||||
|
|
@ -665,8 +709,46 @@ return function (global, window, document, undefined) {
|
|||
};
|
||||
|
||||
/* Register the packaged effects. */
|
||||
for (var effectName in global.Velocity.RegisterUI.packagedEffects) {
|
||||
global.Velocity.RegisterUI(effectName, global.Velocity.RegisterUI.packagedEffects[effectName]);
|
||||
for (var effectName in Velocity.RegisterEffect.packagedEffects) {
|
||||
Velocity.RegisterEffect(effectName, Velocity.RegisterEffect.packagedEffects[effectName]);
|
||||
}
|
||||
|
||||
/*********************
|
||||
Sequence Running
|
||||
**********************/
|
||||
|
||||
/* Note: Sequence calls must use Velocity's single-object arguments syntax. */
|
||||
Velocity.RunSequence = function (originalSequence) {
|
||||
var sequence = $.extend(true, [], originalSequence);
|
||||
|
||||
if (sequence.length > 1) {
|
||||
$.each(sequence.reverse(), function(i, currentCall) {
|
||||
var nextCall = sequence[i + 1];
|
||||
|
||||
if (nextCall) {
|
||||
/* Parallel sequence calls (indicated via sequenceQueue:false) are triggered
|
||||
in the previous call's begin callback. Otherwise, chained calls are normally triggered
|
||||
in the previous call's complete callback. */
|
||||
var timing = (currentCall.options && currentCall.options.sequenceQueue === false) ? "begin" : "complete",
|
||||
callbackOriginal = nextCall.options && nextCall.options[timing],
|
||||
options = {};
|
||||
|
||||
options[timing] = function() {
|
||||
var nextCallElements = nextCall.elements || nextCall.e;
|
||||
var elements = nextCallElements.nodeType ? [ nextCallElements ] : nextCallElements;
|
||||
|
||||
callbackOriginal && callbackOriginal.call(elements, elements);
|
||||
Velocity(currentCall);
|
||||
}
|
||||
|
||||
nextCall.options = $.extend({}, nextCall.options, options);
|
||||
}
|
||||
});
|
||||
|
||||
sequence.reverse();
|
||||
}
|
||||
|
||||
Velocity(sequence[0]);
|
||||
};
|
||||
}((window.jQuery || window.Zepto || window), window, document);
|
||||
}));
|
||||
Loading…
Reference in a new issue