Visibility Toggling

You can now set the `visibility` option just like you can `display`. See http://velocityjs.org/#displayAndVisiblity. Closes #9. Fixed bug that occurs with stagger + out transitions (from the UI pack). Closes #164. Thank you, @codedependant. You can now pass a function to the `stagger` option. Closes #163. Closes #162. Thank you, @codedependant and @cihadturhan.
julianshapiro · Jul 11, 2014 · 5173849 · 5173849
1 parent e172be3
commit 5173849
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 30 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "velocity",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "homepage": "http://velocityjs.org",
   "authors": [
     { "name" : "Julian Shapiro",

diff --git a/component.json b/component.json
@@ -1,7 +1,7 @@
 {
   "name": "velocity",
   "repository": "julianshapiro/velocity",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Accelerated JavaScript animation.",
   "keywords": [
     "animation",

diff --git a/jquery.velocity.js b/jquery.velocity.js
@@ -4,7 +4,7 @@
 
 /*!
 * Velocity.js: Accelerated JavaScript animation.
-* @version 0.5.3
+* @version 0.6.0
 * @docs http://velocityjs.org
 * @license Copyright 2014 Julian Shapiro. MIT License: http://en.wikipedia.org/wiki/MIT_License
 */
@@ -241,7 +241,7 @@ Velocity's structure:
         animate: function () { /* Defined below. */ },
         /* Set to true to force a duration of 1ms for all animations so that UI testing can be performed without waiting on animations to complete. */
         mock: false,
-        version: { major: 0, minor: 5, patch: 3 },
+        version: { major: 0, minor: 6, patch: 0 },
         /* Set to 1 or 2 (most verbose) to output debug info to console. */
         debug: false
     };
@@ -1707,6 +1707,8 @@ Velocity's structure:
                         /* If the stagger option was passed in, successively delay each element by the stagger value (in ms). */
                         if (parseFloat(options.stagger)) {
                             options.delay = parseFloat(options.stagger) * elementIndex;
+                        } else if (Type.isFunction(options.stagger)) {
+                            options.delay = options.stagger.call(element, elementIndex, elementsLength);
                         }
 
                         /* If the drag option was passed in, successively increase/decrease (depending on the presense of options.backwards)
@@ -1893,19 +1895,24 @@ Velocity's structure:
                 opts.complete = null;
             }
 
-            /********************
-               Option: Display
-            ********************/
+            /*********************************
+               Option: Display & Visibility
+            *********************************/
 
-            /* Refer to Velocity's documentation (VelocityJS.org/#display) for a description of the display option's behavior. */
+            /* Refer to Velocity's documentation (VelocityJS.org/#displayAndVisibility) for a description of the display and visibility options' behavior. */
             if (opts.display) {
                 opts.display = opts.display.toString().toLowerCase();
 
+                /* Users can pass in a special "auto" value to instruct Velocity to set the element to its default display value. */
                 if (opts.display === "auto") {
                     opts.display = Velocity.CSS.Values.getDisplayType(element);
                 }
             }
 
+            if (opts.visibility) {
+                opts.visibility = opts.visibility.toString().toLowerCase();
+            }
+
             /**********************
                Option: mobileHA
             **********************/
@@ -2028,6 +2035,10 @@ Velocity's structure:
                             Data(element).opts.display = "block";
                         }
 
+                        if (Data(element).opts.visibility === "hidden") {
+                            Data(element).opts.visibility = "visible";
+                        }
+
                         /* If the loop option was set in the previous call, disable it so that "reverse" calls aren't recursively generated.
                            Further, remove the previous call's callback options; typically, users do not want these to be refired. */
                         Data(element).opts.loop = false;
@@ -2193,7 +2204,7 @@ Velocity's structure:
                         /* If the display option is being set to a non-"none" (e.g. "block") and opacity (filter on IE<=8) is being
                            animated to an endValue of non-zero, the user's intention is to fade in from invisible, thus we forcefeed opacity
                            a startValue of 0 if its startValue hasn't already been sourced by value transferring or prior forcefeeding. */
-                        if ((opts.display && opts.display !== "none") && /opacity|filter/.test(property) && !startValue && endValue !== 0) {
+                        if (((opts.display && opts.display !== "none") || (opts.visibility && opts.visibility !== "hidden")) && /opacity|filter/.test(property) && !startValue && endValue !== 0) {
                             startValue = 0;
                         }
 
@@ -2834,16 +2845,21 @@ Velocity's structure:
 
                     var transformPropertyExists = false;
 
-                    /*********************
-                       Display Toggling
-                    *********************/
+                    /**********************************
+                       Display & Visibility Toggling
+                    **********************************/
 
                     /* If the display option is set to non-"none", set it upfront so that the element can become visible before tweening begins.
                        (Otherwise, display's "none" value is set in completeCall() once the animation has completed.) */
                     if (opts.display && opts.display !== "none") {
                         CSS.setPropertyValue(element, "display", opts.display);
                     }
 
+                    /* Same goes with the visibility option, but its "none" equivalent is "hidden". */
+                    if (opts.visibility && opts.visibility !== "hidden") {
+                        CSS.setPropertyValue(element, "visibility", opts.visibility);
+                    }
+
                     /************************
                        Property Iteration
                     ************************/
@@ -2955,6 +2971,10 @@ Velocity's structure:
                     Velocity.State.calls[i][2].display = false;
                 }
 
+                if (opts.visibility && opts.visibility !== "hidden") {
+                    Velocity.State.calls[i][2].visibility = false;
+                }
+
                 /* Pass the elements and the timing data (percentComplete, msRemaining, and timeStart) into the progress callback. */
                 if (opts.progress) {
                     opts.progress.call(callContainer[1],
@@ -3006,8 +3026,14 @@ Velocity's structure:
             /* If the user set display to "none" (intending to hide the element), set it now that the animation has completed. */
             /* Note: display:none isn't set when calls are manually stopped (via Velocity.animate("stop"). */
             /* Note: Display is ignored with "reverse" calls, which is what loops are composed of, since this behavior would be undesirable. */
-            if (!isStopped && opts.display === "none" && !opts.loop) {
-                CSS.setPropertyValue(element, "display", opts.display);
+            if (!isStopped && !opts.loop) {
+                if (opts.display === "none") {
+                    CSS.setPropertyValue(element, "display", opts.display);
+                }
+
+                if (opts.visibility === "hidden") {
+                    CSS.setPropertyValue(element, "visibility", opts.visibility);
+                }
             }
 
             /* If the element's queue is empty (if only the "inprogress" item is left at position 0) or if its queue is about to run

diff --git a/jquery.velocity.min.js b/jquery.velocity.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "velocity-animate",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Accelerated JavaScript animation.",
   "keywords": [
     "velocity",

diff --git a/velocity.ui.js b/velocity.ui.js
@@ -4,7 +4,7 @@
 
 /*!
 * velocity.ui.js: UI effects pack for Velocity. Load this file after jquery.velocity.js.
-* @version 4.0.3
+* @version 4.0.4
 * @docs http://velocityjs.org/#uiPack
 * @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.
 * @license Copyright Julian Shapiro. MIT License: http://en.wikipedia.org/wiki/MIT_License
@@ -61,7 +61,7 @@
             Container.Velocity.animate(
                 parentNode,
                 { height: (direction === "In" ? "+" : "-") + "=" + totalHeightDelta },
-                { queue: false, easing: "ease-in-out", duration: totalDuration * (direction === "In" ? 0.6 : 1.25) }
+                { queue: false, easing: "ease-in-out", duration: totalDuration * (direction === "In" ? 0.6 : 1) }
             );
         }
 
@@ -102,20 +102,30 @@
                         }
                     }
 
-                    /* If the user isn't overriding the display option, default to block/inline for "In"-suffixed transitions. */
+                    /* If the user isn't overriding the display option, default to "auto" for "In"-suffixed transitions. */
                     if (sequenceOptions.display !== null) {
                         if (sequenceOptions.display && sequenceOptions.display !== "none") {
                             opts.display = sequenceOptions.display;
                         } else if (/In$/.test(effectName)) {
                             opts.display = "auto";
                         }
                     }
+
+                    if (sequenceOptions.visibility && sequenceOptions.visibility !== "hidden") {
+                        opts.visibility = sequenceOptions.visibility;
+                    }
                 }
 
                 /* Special processing for the last effect call. */
                 if (callIndex === properties.calls.length - 1) {
                     /* Append promise resolving onto the user's sequence callback. */ 
                     function injectFinalCallbacks () {
+                        if (sequenceOptions.display === undefined && /Out$/.test(effectName)) {
+                            Container.Velocity.Utilities.each(elements, function(i, element) {
+                                Container.Velocity.CSS.setPropertyValue(element, "display", "none");
+                            });
+                        }
+
                         sequenceOptions.complete && sequenceOptions.complete.call(elements, elements);
 
                         if (promiseData) {
@@ -149,14 +159,9 @@
                             injectFinalCallbacks();
                         }
                     };
-
-                    /* If the user isn't overriding the display option, default to "none" for "Out"-suffixed transitions. */
-                    if (sequenceOptions.display !== null) {
-                        if (sequenceOptions.display) {
-                            opts.display = sequenceOptions.display;
-                        } else if (/Out$/.test(effectName)) {
-                            opts.display = "none";                        
-                        }
+
+                    if (sequenceOptions.visibility === "hidden") {
+                        opts.visibility = sequenceOptions.visibility;
                     }
                 }