Velocity.js 中文文档_备份

index_Velocity.js 中文文档_备份源代码>!DOCTYPE html<>html lang="zh-CN"<>head<>meta charset="UTF-8"<>meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"<>meta name="description" content="Velocity.js - 比jQuery动画和CSS-transitions性能更好的JavaScript动画库。"<>meta name="keywords" content="JS, JavaScript, framework, JavaScript动画库, JS动画框架, Velocity.js中文教程, Velocity.js中文文档"<>meta name="author" content="Jean >mrfront@163.com<"<>title<Velocity.js 中文文档>/title<>link rel="stylesheet" href="static/css/doc9dfa.css"<>script src="static/js/highlight.min.js"<>/script<>/head<>body<>svg style="position:absolute;width:0;height:0;overflow:hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"<>defs<>symbol id="icon-menu" viewbox="0 0 32 32"<>title<menu>/title<>path class="path1" d="M28.8 7.2c0 0.663-0.537 1.2-1.2 1.2h-23.2c-0.663 0-1.2-0.537-1.2-1.2v0c0-0.663 0.537-1.2 1.2-1.2h23.2c0.663 0 1.2 0.537 1.2 1.2v0z"<>/path<>path class="path2" d="M28.8 24.8c0 0.663-0.537 1.2-1.2 1.2h-23.2c-0.663 0-1.2-0.537-1.2-1.2v0c0-0.663 0.537-1.2 1.2-1.2h23.2c0.663 0 1.2 0.537 1.2 1.2v0z"<>/path<>path class="path3" d="M28.8 16c0 0.663-0.537 1.2-1.2 1.2h-23.2c-0.663 0-1.2-0.537-1.2-1.2v0c0-0.663 0.537-1.2 1.2-1.2h23.2c0.663 0 1.2 0.537 1.2 1.2v0z"<>/path<>/symbol<>symbol id="icon-back-top" viewbox="0 0 32 32"<>title<back-top>/title<>path class="path1" d="M28.923 8.615c0 0.68-0.551 1.231-1.231 1.231h-23.385c-0.68 0-1.231-0.551-1.231-1.231v0c0-0.68 0.551-1.231 1.231-1.231h23.385c0.68 0 1.231 0.551 1.231 1.231v0z"<>/path<>path class="path2" d="M27.077 25.846c-0.315 0-0.63-0.12-0.87-0.36l-10.207-10.207-10.207 10.207c-0.481 0.481-1.26 0.481-1.741 0s-0.481-1.26 0-1.741l11.077-11.077c0.481-0.481 1.26-0.481 1.741 0l11.077 11.077c0.481 0.481 0.481 1.26 0 1.741-0.24 0.24-0.555 0.36-0.87 0.36z"<>/path<>/symbol<>/defs<>/svg<>header class="header"<>div class="container"<>a class="logo" href=""<Velocity>span<.>/span<js>/a<>nav class="nav"<>ul<>li<>a class="current" href=""<Basics 基础用法>/a<>/li<>li<>a href="option.html"<Option 配置项>/a<>/li<>li<>a href="command.html"<Command 指令>/a<>/li<>li<>a href="feature.html"<Feature 特色>/a<>/li<>li<>a href="advanced.html"<Advanced 高级用法>/a<>/li<>li<>a href="plugins.html"<Plugins 插件>/a<>/li<>/ul<>/nav<>a class="btn-menu" id="J_BtnMenu" href="javascript:;"<>svg class="icon icon-menu"<>use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"<>/use<>/svg<>/a<>/div<>/header<>div class="content"<>div class="container"<>div class="row"<>div class="main col-md-9" role="main"<>div class="doc"<>div class="title"<>h1<Velocity.js 中文文档>/h1<>a class="github-logo" href="javascript:;" target="_blank"<>svg aria-hidden="true" class="octicon octicon-mark-github" version="1.1" viewbox="0 0 16 16" width="32"<>path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"<>/path<>/svg< >span<https://github.com/julianshapiro/velocity>/span<>/a<>/div<>div class="intro"<>p<Version: 1.5.0>span class="grey" style="padding-left:.5em;font-size:.875rem"<( 更新于2017-03-24 )>/span<>/p<>h3<概述>/h3<>p<Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和>span class="code-inline"<$.animate()>/span<有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：>strong<颜色动画>/strong<、>strong<转换动画(transforms)>/strong<、>strong<循环>/strong<、 >strong<缓动>/strong<、>strong<SVG 动画>/strong<、和 >strong<滚动动画>/strong< 等特色功能。>br<>/p<>p<它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation， 是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，最低可兼容到 IE8 和 Android 2.3。>/p<>p<Velocity 目前已被数以千计的公司使用在自己的项目中，包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等，这里 >a href="javascript:;" target="_blank"<Libscore.com>/a< 统计了哪些站点正使用 velocity.js。>/p<>p<英文官网：>a href="javascript:;" target="_blank"<http://velocityjs.org/>/a< >span class="download"<>a class="btn btn-primary" href="javascript:;" target="_blank"<下载 Velocity.js>/a<>/span<>/p<>p<先来看第一个 Velocity 的例子：>/p<>div class="code"<>span class="tip"<HTML>/span<>pre<>code class="html"<<body>
    <!-- dom -->
    <div class="element"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
</body>>/code<>/pre<>/div<>div class="code"<>span class="tip"<JavaScript>/span<>pre<>code class="js"<// 标准写法
// (为了简洁，后面的示例代码中 将直接使用 $element 来代替 jQuery 选择器)
$(".element").velocity({
    left: "200px"
}, {
    duration: 450,
    delay: 1000
});

// $.animate() 的写法，效果同上
$(".element").delay(1000).velocity({left: "200px"}, 450);>/code<>/pre<>/div<>p<你可以通过 >strong<npm>/strong< 或 >strong<bower>/strong< 安装 Velocity：>/p<>p<npm：>span class="code-inline"<npm install velocity-animate>/span<>br<bower：>span class="code-inline"<bower install velocity>/span<>/p<>/div<>h2<Basics 基础用法>/h2<>h3 id="J_Dependencies"<1. Dependencies 模块依赖>/h3<>h4<1-1. Velocity 不依赖 jQuery>/h4<>p<Velocity.js 可以在不引入 jQuery 的情况下单独使用。如果 你需要大部分动画效果能兼容 IE8，就必须引入 jQuery 1×。 它也可以和 Zepto 一起使用，写法和 jQuery 一样：>/p<>div class="code"<>span class="tip"<JavaScript>/span<>pre<>code class="js"<// 无 jQuery 或 Zepto 时，Velocity()方法挂载在 window 对象上 (window.velocity)
// ( 第一个参数为原生js的dom选择器 )
Velocity(document.getElementById("dummy"), {
    opacity: 0.5
}, {
    duration: 1000
});

// 使用 jQuery 或 Zepto 时
$("#dummy").velocity({
    opacity: 0.5
}, {
    duration: 1000
});>/code<>/pre<>/div<>h4<1-2. 模块加载器：>strong<Webpack>/strong<, >strong<Browserify>/strong<>/h4<>p<使用 jQuery 时，必须在 Velocity 之前加载 jQuery：>/p<>div class="code"<>span class="tip"<JavaScript>/span<>pre<>code class="js"<window.jQuery = window.$ = require("path/to/jquery-x.x.x.js");
require("path/to/velocity.js");
require("path/to/velocity.ui.js"); // velocity.ui 在 velocity 之后加载

/* Your app code here. */
$("body").velocity({ opacity: 0.5 });>/code<>/pre<>/div<>p<不使用 jQuery 就直接加载 Velocity：>/p<>div class="code"<>span class="tip"<JavaScript>/span<>pre<>code class="js"<var Velocity = require("path/to/velocity.js");
require("path/to/velocity.ui.js");

/* Your app code here. */
Velocity(document.body, { opacity: 0.5 });>/code<>/pre<>/div<>h4<1-3. 模块加载器：>strong<RequireJS>/strong<>/h4<>div class="code"<>span class="tip"<JavaScript>/span<>pre<>code class="js"<require.config({
    paths: {
        "jquery": "/path/to/jquery-x.x.x",
        "velocity": "path/to/velocity",
        // 如果你使用了 velocity.ui
        "velocity-ui": "path/to/velocity.ui"
    },
    shim: {
        "velocity": {
            deps: [ "jquery" ]
        },
        // velocity.ui 依赖 velocity
        "velocity-ui": {
            deps: [ "velocity" ]
        }
    }
});

require([ "jquery", "velocity", "velocity-ui" ], function ($, Velocity) {
    /* Your app code here. */
    $("body").velocity({ opacity: 0.5 });
});>/code<>/pre<>/div<>h3 id="J_Arguments"<2. Arguments 参数>/h3<>h4<2-1. 参数概述和基础写法：>/h4<>p<Velocity 接收一组 css 属性键值对 (css map) 作为它的第一个参数，该参数作为动画效果的最终属性。第二个参数是可选参数 为动画的额外配置项。下面为参数的写法：>/p<>div class="code"<>span class="tip"<JavaScript>/span<>pre<>code class="js"<$element.velocity({
    width: "500px",        // 动画属性 宽度到 "500px" 的动画
    property2: value2      // 属性示例
}, {
    /* Velocity 动画配置项的默认值 */
    duration: 400,         // 动画执行时间
    easing: "swing",       // 缓动效果
    queue: "",             // 队列
    begin: undefined,      // 动画开始时的回调函数
    progress: undefined,   // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
    complete: undefined,   // 动画结束时的回调函数
    display: undefined,    // 动画结束时设置元素的 css display 属性
    visibility: undefined, // 动画结束时设置元素的 css visibility 属性
    loop: false,           // 循环
    delay: false,          // 延迟
    mobileHA: true         // 移动端硬件加速（默认开启）
});>/code<>/pre<>/div<>h4<2-2. 单一对象的参数写法：>/h4<>p<Velocity 也支持 single-argument 的语法，看下面示例：>/p<>div class="code"<>span class="tip"<JavaScript>/span<>pre<>code class="js"<$element.velocity({
    properties: { opacity: 1 },
    options: { duration: 500 }
});

// 或者：
$element.velocity({
    p: { opacity: 1 }, // 可以将 properties 简写成 p
    o: { duration: 500 }
});>/code<>/pre<>/div<>h4<2-3. 逗号分割的参数写法（类似 $.animate）：>/h4<>div class="code"<>span class="tip"<JavaScript>/span<>pre<>code class="js"<$element.velocity({ top: 50 }, 1000);
$element.velocity({ top: 50 }, 1000, "swing");
$element.velocity({ top: 50 }, "swing");
$element.velocity({ top: 50 }, 1000, function() { alert("Hi"); });>/code<>/pre<>/div<>h3 id="J_PropertiesMap"<3. Properties Map 动画属性>/h3<>p<如果不写属性值的单位, Velocity 会将像素(px)作为默认单位>/p<>div class="code"<>span class="tip"<JavaScript>/span<>pre<>code class="js"<// 等同 padding: 1px
$element.velocity({ padding: 1 });

// 等同 padding-left: 1px, padding-right: 1px
$element.velocity({
    paddingLeft: 1,
    paddingRight: 1
});

// 但你不能这样写！因为这样相当于为 padding 赋了多个值
$element.velocity({ padding: "1 1 1 1" }); // error>/code<>/pre<>/div<>p<Velocity 在 1.2.0+ 版本里增加了对 ">strong<px>/strong<, >strong<em>/strong<, >strong<rem>/strong<, >strong<%>/strong<, >strong<deg>/strong<, >strong<vw/vh>/strong<" 这些单位的支持， 如果不填写属性单位 默认单位还是"px"，但 "deg" 用于 rotateZ 属性时可以省略不写。 Velocity 还支持动态计算属性值，包括 ">strong<+>/strong<, >strong<->/strong<, >strong<*>/strong<, >strong</>/strong<"，还可以设置元素在动画执行前的初始值，看下面示例：>br<>span class="grey"<( 注意："rem" 只支持 IE9+，"vh/vw" 只支持 IE9+ 和 Android 4.4+ )>/span<>/p<>div class="code"<>span class="tip"<JavaScript>/span<>pre<>code class="js"<$element.velocity({
    top: 50,                // 等同于 "50px"
    left: "50%",
    width: "+=5rem",        // 每次在当前值上叠加 5rem
    height: "*=2"           // 每次在当前值上叠乘 2
    color: ["#888", "#000"] // 每次动画执行前，color 的初始值都为"#000"（从"#000"过渡成"#888"）
});>/code<>/pre<>/div<>h3 id="J_Chaining"<4. Chaining 链式动画>/h3<>p<当一个元素连续应用多个>span class="code-inline"<velocity()>/span<时，动画将以队列的方式执行：>/p<>div class="code"<>span class="tip"<JavaScript>/span<>pre<>code class="js"<$element
    /* 先执行宽度变为75px的动画 */
    .velocity({ width: 75 })
    /* 等前面的宽度动画结束后，再执行高度变为0的动画 */
    .velocity({ height: 0 });>/code<>/pre<>/div<>h3 class="nav-title"<导航>/h3<>ul class="nav-list"<>li class="current"<>a href="javascript:;"<Basics 基础>/a<>/li<>li<>a href="option.html"<Option 配置项>/a<>/li<>li<>a href="command.html"<Command 指令>/a<>/li<>li<>a href="feature.html"<Feature 特色>/a<>/li<>li<>a href="advanced.html"<Advanced 高级用法>/a<>/li<>li<>a href="plugins.html"<Plugins 插件>/a<>/li<>/ul<>p<问题反馈：mrfront@163.com>/p<>/div<>/div<>div class="complementary col-md-3" role="complementary"<>div class="glossary" id="J_Glossary"<>div class="glossary-item current"<>a href=""<Basics>span< 基础>/span<>/a<>ul<>li<>a href="#J_Dependencies"<1. Dependencies 模块依赖>/a<>/li<>li<>a href="#J_Arguments"<2. Arguments 参数>/a<>/li<>li<>a href="#J_PropertiesMap"<3. Properties Map 动画属性>/a<>/li<>li<>a href="#J_Chaining"<4. Chaining 链式动画>/a<>/li<>/ul<>/div<>div class="glossary-item"<>a href="option.html"<Option>span< 配置项>/span<>/a<>ul<>li<>a href="#J_Duration"<1. Duration 动画执行时间>/a<>/li<>li<>a href="#J_Easing"<2. Easing 缓动效果>/a<>/li<>li<>a href="#J_Queue"<3. Queue 动画队列>/a<>/li<>li<>a href="#J_CallBack"<4. Begin & Complete & Progress 回调函数>/a<>/li<>li<>a href="#J_MobileHA"<5. mobileHA 移动端硬件加速>/a<>/li<>li<>a href="#J_Loop"<6. Loop 动画循环执行>/a<>/li<>li<>a href="#J_Delay"<7. Delay 动画延迟执行>/a<>/li<>li<>a href="#J_Attribute"<8. Display & Visibility>/a<>/li<>/ul<>/div<>div class="glossary-item"<>a href="command.html"<Command>span< 指令>/span<>/a<>ul<>li<>a href="#J_FadeSlide"<1. Fade & Slide>/a<>/li<>li<>a href="#J_Scroll"<2. Scroll 滚动>/a<>/li<>li<>a href="#J_Stop"<3. Stop 停止当前动画>/a<>/li<>li<>a href="#J_Finish"<4. Finish 跳转到结束状态>/a<>/li<>li<>a href="#J_Reverse"<5. Reverse 动画反向执行>/a<>/li<>/ul<>/div<>div class="glossary-item"<>a href="feature.html"<Feature>span< 特色>/span<>/a<>ul<>li<>a href="#J_Transforms"<1. Transforms>/a<>/li<>li<>a href="#J_Colors"<2. Colors 颜色动画>/a<>/li<>li<>a href="#J_SVG"<3. SVG>/a<>/li<>li<>a href="#J_Hook"<4. Hook>/a<>/li<>li<>a href="#J_Promises"<5. Promises>/a<>/li<>li<>a href="#J_Mock"<6. Mock>/a<>/li<>li<>a href="#J_UtilityFunction"<7. Utility Function>/a<>/li<>/ul<>/div<>div class="glossary-item"<>a href="advanced.html"<Advanced>span< 高级用法>/span<>/a<>ul<>li<>a href="#J_ValueFunctions"<1. Value Functions>/a<>/li<>li<>a href="#J_Forcefeeding"<2. Forcefeeding>/a<>/li<>/ul<>/div<>div class="glossary-item"<>a href="plugins.html"<Plugins>span< 插件>/span<>/a<>ul<>li<>a href="#J_UIPack"<1. UI Pack (velocity.ui.js)>/a<>/li<>li<>a href="#J_VMD"<2. VMD>/a<>/li<>li<>a href="#J_EmberMisc"<3. Ember & Misc>/a<>/li<>/ul<>/div<>/div<>/div<>/div<>/div<>/div<>footer class="footer"<© >span<2015>/span< >/footer<>div class="sidebar-fixed"<>div class="back-top" data-ride="back-top"<>a href="javascript:;"<>svg class="icon icon-back-top"<>use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-back-top"<>/use<>/svg<>/a<>/div<>/div<>script src="static/js/jquery.min.js"<>/script<>script src="static/js/doc9dfa.js"<>/script<>script src="static/js/stat-1261492199_1261492199.js" language="JavaScript"<>/script<>/body<>/html<18823