velocity.js 使用示例（下）

指定在动画开始之前插入暂停的延迟选项（以毫秒为单位）。延迟选项存在，以便动画逻辑可以完全保持在Velocity - 而不是在整个代码中喷洒jQuery的$ .delay（）。
您可以在循环选项旁边设置延迟选项，以在循环替换之间创建暂停：
$element.velocity({
    height: "+=10em"
}, {
    loop: 4,
    /* Wait 100ms before alternating back. */
    delay: 100
});

Velocity的显示和可见性选项直接对应它们的CSS对应，因此接受相同的值：display接受“inline”，“inline-block”，“block”，“flex”，“”（空引号删除属性） ，以及浏览器原生支持的其他任何内容。可见性接受“隐藏”，“可见”，“折叠”和“”（空引号删除属性）。要显示，可见性和不透明度的行为之间的比较，请参阅此帖子。
独占Velocity，显示选项也采用非标准值“auto”，它指示Velocity将元素设置为其本机显示值。例如，锚元素默认为“inline”，而div元素默认为“block”。
Velocity集成的CSS显示/可见性更改允许所有的动画逻辑包含在Velocity内，这意味着您不再需要在整个代码中使用jQuery的$ .hide（）和$ .show（）函数。
用法
当显示选项设置为“无”（或当可见性设置为“隐藏”时），在动画完成后相应地设置CSS属性。这在动画完成时隐藏元素，在将元素的不透明度动画化为0时非常有用。（当这些选项与loop选项一起使用时，它们在最终循环迭代结束时设置）。
这里，一个元素在淡出后从页面的流中删除。这将替换jQuery的$ .fadeOut（）函数：
/* Animate down to zero then set display to "none". */
$element.velocity({ opacity: 0 }, { display: "none" });
这里，元素一旦淡出就变得不可见：
/* Animate down to zero then set visibility to "hidden". */
$element.velocity({ opacity: 0 }, { visibility: "hidden" });
相反，当显示/可见性被设置为除“无”/“隐藏”之外的值（例如“块”/“可见”）时，在动画开始之前设置相应的值，使得该元素在整个持续时间动画。
（此外，如果不透明度同时动画，它将被强制为0的起始值。这对于将元素淡化回视图很有用。）
这里，在元素开始衰落之前将显示设置为“块” ：
/* Set display to "block" then animate from opacity: 0. */
$element.velocity({ opacity: 1 }, { display: "block" });

淡入淡出和滑动命令会自动设置目标元素的显示属性以显示或隐藏元素（视情况而定）。默认情况下，当显示一个元素时，显示设置为元素的本地类型（divs设置为“block”，跨度设置为“inline”等）。这可以通过将自定义显示值传递到options对象来覆盖：
/* Set the element to a custom display value of "table". */ $element.velocity("fadeIn", { display: "table" });
fadeIn和fadeOut
要淡出一个元素，传入“fadeIn”或“fadeOut”作为Velocity的第一个参数。淡入淡出命令的行为与标准Velocity调用相同; 他们可以选择，他们可以排队。
$element
    .velocity("fadeIn", { duration: 1500 })
    .velocity("fadeOut", { delay: 500, duration: 1500 });
上面，我们淡入一个元素为1500毫秒，暂停500毫秒（延迟：500），然后淡出另一个1500毫秒。
slideUp和slideDown
要将元素的高度设置为零或从零开始，请将“slideDown”或“slideUp”作为Velocity的第一个参数。滑动命令的行为与标准Velocity调用相同; 他们采取的选择和可以链接。
$element
    .velocity("slideDown", { duration: 1500 })
    .velocity("slideUp", { delay: 500, duration: 1500 });
上面，我们将一个元素向下滑动到视图超过1500毫秒，暂停500毫秒（延迟：500），然后向上滑出视图另一个1500毫秒。

要滚动浏览器到元素的顶部边缘，传递“scroll”作为Velocity的第一个参数（而不是属性映射）。滚动命令的行为与标准Velocity调用相同; 它可以采取选项，它可以排队。
$element
    .velocity("scroll", { duration: 1500, easing: "spring" })
    .velocity({ opacity: 1 });
上面，我们使用1500ms的持续时间和“弹簧”缓动将浏览器滚动到div的边缘的顶部。然后，一旦元素滚动到视图，我们淡入它。
要使用滚动条滚动到包含元素内的元素，滚动命令唯一地采用可选的容器选项，它接受jQuery对象或原始DOM元素。容器元素必须将其CSS 位置属性设置为相对，绝对或固定 - 静态将不工作：
/* Scroll $element into view of $("#container"). */
$element.velocity("scroll", { container: $("#container") });
注意，在这两种情况下 - 滚动是相对于浏览器窗口还是包含元素 - 滚动命令总是在正在滚动到视图中的元素上调用。
默认情况下，滚动发生在Y轴上。传递轴：“x”选项水平滚动改为：
/* Scroll the browser to the LEFT edge of the targeted div. */
$element.velocity("scroll", { axis: "x" });
滚动还唯一采用偏移选项，以像素为单位，偏移目标滚动位置：
$element
    /* Then scroll to a position 250 pixels BELOW the div. */
    .velocity("scroll", { duration: 750, offset: 250 })
    /* Scroll to a position 50 pixels ABOVE the div. */
    .velocity("scroll", { duration: 750, offset: -50 });
或者，要滚动整个浏览器窗口任意量（而不是元素的边缘），只需定位html元素并使用自定义偏移值。（可选）另外传入mobileHA：false，以避免iOS上出现潜在的闪烁问题：
/* Scroll the whole page to an arbitrary value. */
$("html").velocity("scroll", { offset: "750px", mobileHA: false });

要立即停止元素上所有当前Velocity调用（包括通过queue：false调用的并行动画），请将“stop”作为Velocity的第一个参数传递。元素的动画队列中的下一个Velocity调用立即开始。
如果要停止自定义队列，请将队列名称作为第二个参数。或者，要仅停止平行动画（使用queue：false调用），而不是当前默认队列动画，请将false传递为自定义队列名称。
$element.velocity("stop"); // Normal stop
$element.velocity("stop", "myQueue"); // Custom queue stop
当呼叫停止时，其完整的回调和显示：无跳转被跳过。
重要提示：注意，循环的 Velocity调用实际上是一系列链接在一起的Velocity调用。因此，要完全停止循环动画，您必须传入第二个参数以清除元素的剩余调用。类似地，为了完全停止UI包效果（可以包含多个 Velocity调用），您需要清除元素的整个待处理动画队列。有关如何执行此操作的详细信息，请参阅下面的清除动画队列。
作为参考，一个常见的模式是停止调用，然后使用Velocity的反向命令将其动画回到其起始值：
/* Prior Velocity call. */
$element.velocity({ opacity: 0 });
/* Later, midway through the call... */
$element
    /* Stop animating opacity. */
    .velocity("stop")
    /* Animate opacity back to 1. */
    .velocity("reverse");
//清除动画队列============================
当调用停止时，元素的队列链中的下一个Velocity调用立即触发。或者，您可以传递true（或自定义队列的名称）以清除所有元素的剩余排队调用。与标准停止行为一样，在元素上运行的所有并行动画也将停止：
/* Prior Velocity calls. */
$element
    .velocity({ width: 100 }, 1000)
    .velocity({ height: 200 }, 1000);
/* Called immediately after. */
$element.velocity("stop", true);
上面，初始{width：100}调用将立即停止，随后的{height：200}将被删除并完全跳过（它永远不会运行）。
重要提示：如果在针对多个元素的调用中清除剩余的队列条目，请确保将停止命令应用于调用初始定位的所有元素集。否则，一些元素将具有阻塞队列，并将进一步忽略Velocity调用，直到它们被手动出列。
// 停止多元素调用 =========================================
因为Velocity使用基于调用的补间，当在一个元素上调用停止时，它特别是负责停止该元素的当前动画的调用。因此，如果其他元素也被同一个调用定向，它们也将被停止：
/* Prior Velocity call. */
$allElements.velocity({ opacity: 0 });
/* Stop the above call. */
$allElements.velocity("stop");
or
/* Behaves like above since it's ending a multi-element call. */
$firstElement.velocity("stop");
如果你想要在多元素动画中的元素停止控制，通过调用Velocity每个元素一次执行动画。

要过早跳到动画结束，使用finish命令作为Velocity的第一个参数传递“完成”。
$element.velocity("finish");
而Velocity的停止命令突然中止动画，并将其动画属性保留在停止的确切时刻的任何值，完成应用动画的所需最终属性值。此外，与停止不同，完成不会阻止呼叫的完整回调或显示：无切换发生。简而言之，想想finish命令作为一种手段立即跳转到动画调用中的最后一帧。
与停止一样，调用完成也将影响所有当前活动的并行动画（使用queue：false调用的动画）。此外，将false的第二个参数传递给finish命令与将此参数传递给stop命令具有相同的效果：仅将并行动画作为完成的目标。最后，将true的第二个参数传递给finish命令也具有将此参数传递给stop命令的相同效果：除了命令的默认行为（停止当前排队的调用加上所有并行动画）之外，剩余的调用默认队列也将从队列中删除。但是，请注意，这些调用不会在删除之前立即运行; 剩余的排队呼叫的动画效果将不会发生。

要使元素在最后一个Velocity调用之前恢复为值，请将“reverse”作为Velocity的第一个参数。
Reverse默认为在元素以前的Velocity调用中使用的选项（持续时间，缓动等）。但是，这可以通过传入一个新的选项对象来覆盖：
$element.velocity("reverse");
或
$element.velocity("reverse", { duration: 2000 });
前一个调用的回调选项（开始和完成）被反向忽略; 反向不重新启动回调。
注意：反向命令仅适用于默认效果队列; reverse不能与自定义队列或并行队列（queue：false）一起使用。

CSS变换属性允许您在2D或3D空间中执行平移，缩放和旋转。在MDN了解详情。
为了实现与CSS校验，速度使用translateX和translateY的转换翻译，而不是属性名点¯x和ÿ。
/* Translate to the right and rotate clockwise. */
$element.velocity({
    translateX: "200px",
    rotateZ: "45deg"
});
由于Velocity只为每个CSS属性动画一个数值，因此必须使用transform属性声明轴。例如，scale不能动画为“1.5，2”，但scaleX（）和scaleY（）可以同时动画到这些值，以实现相同的效果。（请参阅对Velocity的完全变换属性支持的CSS支持下拉列表。）
注意，Velocity的性能优化具有忽略外部变化以转换值（包括在样式表中定义的初始值，但这通过Forcefeeding补救）的副产品。（您可以使用Hook功能在Velocity中手动设置变换值。）
细节
当3D变换属性（translateZ和rotateX / Y）正在动画时， 所有浏览器自动触发硬件加速（HA）。HA的优点包括增加平滑性，而缺点包括模糊文本和内存消耗。如果您还希望强制HA用于2D变换，以便从其可以提供的增加的性能（以牺牲可能的文本模糊性）中受益，那么通过将3D变换属性动画化为伪值（例如0）来触发HA您的动画：
/* Translate to the right and rotate clockwise. */
$element.velocity({
    translateZ: 0, // Force HA by animating a 3D property
    translateX: "200px",
    rotateZ: "45deg"
});
（本节仅适用于桌面浏览器-默认情况下，速度自动打开HA对所有移动动画见。mobileHA了解更多信息。）
浏览器支持：请记住，IE 10以下和Android 3.0以下不支持3D变换，甚至在IE 9下面也不支持2D变换。此外，请记住，必须在父元素上设置透视图才能使3D变换生效。有关详细信息，请参阅MDN的转换指南。

Velocity支持以下属性的颜色动画：color，backgroundColor，borderColor和outlineColor。
你可以通过一个颜色属性十六进制字符串（RGB，HSLA字符串和颜色关键字不支持），或者你可以动画颜色属性的各个RGB分量值：颜色成分是红，绿，蓝，和阿尔法，它们的范围是从0到255.（他们也可以传递一个百分比值。）第四个组件，Alpha（与opacity相同），范围从0到1。
$element.velocity({
    /* Animate a color property to a hex value of red... */
    backgroundColor: "#ff0000",
    /* ... with a 50% opacity. */
    backgroundColorAlpha: 0.5,
    /* Animate the red RGB component to 50% (0.5 * 255). */
    colorRed: "50%",
    /* Concurrently animate to a stronger blue. */
    colorBlue: "+=50",
    /* Fade the text down to 85% opacity. */
    colorAlpha: 0.85
});
在IE 9及以下版本中，不支持RGBA，Velocity通过忽略Alpha组件来恢复为纯RGB。

Velocity包含对SVG元素动画的完全支持，包括SVG特定属性的动画，例如x，rx，stroke-width等。（一般来说，Velocity可以对任何具有单个数值的属性进行动画处理。）此外，Velocity支持SVG的fill，stroke和stopColor属性的颜色动画。
SVG元素动画有两个注意事项：首先，不是所有的CSS属性都可以应用于SVG元素。（有关支持的属性的列表，请参阅下面的下拉列表。）第二，虽然SVG属性可以取px和％单位，但它们不能使用em和rem单位。要了解有关使用SVG的更多信息，请参阅本文。
请注意，如上面的下拉列表中所列 - 只有2D SVG 变换属性适用于未运行Chrome的IE和Android设备。（所有其他浏览器都有完整的3D支持。）此外，请注意下拉列表中每个属性支持的单位类型的白名单。
下面是一些SVG示例属性：
$svgRectangle.velocity({
    /* Coordinate animation works. */
    x: 200,
    r: 25,
    /* 2D transforms work. */
    translateX: "200px",
    /* 3D transforms work in non-IE browsers. */
    translateZ: "200px",
    /* "Fill" color animation works. */
    fill: "#ff0000",
    strokeRed: 255,
    strokeGreen: 0,
    strokeBlue: 0,
    /* Some standard CSS properties work. */
    opacity: 1,
    width: "50%"
});
注意：如果设置viewbox属性，同时在SVG容器元素上设置width / height属性，则宽度和高度值必须与视框的宽度/高度匹配，否则使用％单位进行动画处理可能会导致不正确的动画。
浏览器支持：在IE9以下或Android 3.0以下不支持SVG元素。

钩子是多值CSS属性的子值。例如，textShadow CSS属性采用“0px 0px 0px black”的多值形式。Velocity允许您单独为这些子值设置动画，例如textShadowX，textShadowY和textShadowBlur：
$element.velocity({ textShadowBlur: "10px" });
同样，Velocity允许您为boxShadow，clip和其他多值属性的子值设置动画。参考CSS属性支持窗格的Velocity的钩子的完整列表。
由于不可能通过jQuery的$ .css（）单独设置这些钩子值，Velocity提供了一个hook（）辅助函数。它具有与$ .css（）相同的API ，修改后将元素作为其第一个参数（原始DOM节点或jQuery对象）：$ .Velocity.hook（element，property [，value]） l：
设置挂钩值：
$.Velocity.hook($element, "translateX", "500px"); // Must provide unit type
$.Velocity.hook(elementNode, "textShadowBlur", "10px"); // Must provide unit type
获取挂钩值：
$.Velocity.hook($element, "translateX");
$.Velocity.hook(elementNode, "textShadowBlur");
注意：当使用钩子函数时，如果CSS属性可以接受一个单元类型（例如px，deg等），你必须提供它。

当A）使用效用函数并且B）在浏览器中检测到promise支持时，Velocity调用自动返回promise对象（有关更多详细信息，请参阅下面的浏览器支持）。相反，当使用jQuery的对象语法（例如$ element.velocity（...））时，绝不会返回promise。
/* Using Velocity's utility function... */
$.Velocity.animate(element, { opacity: 0.5 })
    /* Callback to fire once the animation is complete. */
    .then(function(elements) { console.log("Resolved."); })
    /* Callback to fire if an error occurs. */
    .catch(function(error) { console.log("Rejected."); });
相反，当无效的第一个参数传递到Velocity调用（例如，一个空的属性对象或不存在的Velocity命令）时，promise被拒绝。拒绝回调被传递触发的错误对象。
Promises 还使用UI包的效果（包括自定义效果）。然而，像往常一样，确保您使用Velocity的效用函数调用UI包效果。此外，确保您使用的最新版本的UI包，因为promise支持最近才添加。
浏览器支持：只有Chrome桌面和Firefox桌面支持promise。对于所有其他浏览器，您必须安装第三方promises 库，例如Bluebird或When 's ES6 Promises shim。（不要使用Q，因为它不会像ES6 promises那样自动安装自己。）当使用Bluebird或When时，确保promise库在 Velocity 之前加载。蓝鸟和当工作回到Android 2.3和IE8。

执行UI测试时，可以设置$ .Velocity.mock = true; 强制所有速度动画以0ms持续时间和0ms延迟运行。（本质上，值完全应用于下一个动画节拍。）当执行重复的UI测试（对于测试结束值比测试动画补间更重要）时，这是非常有用的。
或者，您也可以将$ .Velocity.mock设置为任意乘数，以加速或减慢页面上的所有动画：
/* Slow down all animations by a factor of 10. */
$.Velocity.mock = 10;
当您尝试微调多元素动画序列的时间时，以这种方式减少动画是有用的。

而不是使用jQuery的插件语法来定位jQuery对象，你可以使用Velocity的效用函数来定位原始DOM元素：
/* Standard multi-argument syntax. */
var divs = document.getElementsByTagName("div");
$.Velocity(divs, { opacity: 0 }, { duration: 1500 });
/* Alternative single-argument syntax (ideal for CoffeeScript). <i>e</i> stands for elements, <i>p</i> for properties, and <i>o</i> for options: */
var divs = document.getElementsByTagName("div");
$.Velocity({ e: divs, p: { opacity: 0 }, o: { duration: 1500 });
语法与Velocity的标准语法相同，除了所有的参数都向右移动一个位置，以便可以传递位置零的元素。
使用效用函数在实时生成元素并且不能承担jQuery对象创建（触发DOM查询）的开销时非常有用。

属性值可以是传递函数。这些函数在元素开始动画之前被调用一次。因此，当循环/反转时，功能不会重复地重新调用。
函数返回的值用作属性值：
$element.velocity({
    opacity: function() { return Math.random() }
});
值函数作为它们的上下文传递迭代元素，加上第一个参数包含集合中元素的索引，第二个参数包含集合的总长度。通过使用这些值，可以实现视觉偏移：
$element.velocity({
    translateX: function(i, total) {
        /* Generate translateX's end value. */
        return i * 10;
    }
});
除了帮助在Velocity中包含动画逻辑之外，值函数是在一组元素之间区分属性的最有效的方式 - 与通过它们进行预迭代和为每个调用Velocity一次，这放弃了Velocity的元素集优化。

传统上，动画引擎查询DOM以确定动画的每个属性的初始值。Velocity是一个称为forcefeeding的替代技术的发起者，其中用户显式地定义开始值本身，以便可以避免DOM查询 - 完全消除布局颠簸。
Forcefed开始值作为数组中的第二个或第三个项目，取代属性的值。（如“ 缓动”窗格中所述，第二个项目可以选择性地作为每个属性的缓动）。
$element.velocity({
    /* Two-item array format. */
    translateX: [ 500, 0 ],
    /* Three-item array format with a per-property easing. */
    opacity: [ 0, "easeInSine", 1 ]
});
上面，我们传递translateX的开始值为0，因为我们知道元素还没有被翻译（也许页面刚刚加载）。接下来，我们还知道元素的不透明度目前是1，因为它是不透明度的默认值，我们还没有修改元素。有了这两个属性，我们在我们知道（或想要）的原始动画值强制。
与标准属性值类似，强制启动值也接受值函数。（你可以利用这个特性为元素设置不同的起始值，见Velocity的3D demo codec）。
确保只在动画开始时强制进给，而不是在链接动画之间（Velocity 已在内部执行值缓存）：
$element
    /* Optionally forcefeed here. */
    .velocity({ translateX: [ 500, 0 ] })
    /* Do not forcefeed here; 500 is internally cached. */
    .velocity({ translateX: 1000 });
强迫输入在高压情况下是无价的，其中重型DOM查询可以极大地影响帧率。然而，在大多数低压UI UI动画中，强制进给是一个不必要的优化。
注意：强制进入钩子的子属性将把钩子的非动画子属性默认为它们的零值。