Dependencies 模块依赖

优质

小牛编辑

130浏览

2023-12-01

Velocity 不依赖 jQuery

Velocity.js 可以在不引入 jQuery 的情况下单独使用。如果你需要大部分动画效果能兼容 IE8，就必须引入 jQuery 1×。它也可以和 Zepto 一起使用，写法和 jQuery 一样：

// 无 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
});

模块加载器：Webpack, Browserify

使用 jQuery 时，必须在 Velocity 之前加载 jQuery：

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 });

不使用 jQuery 就直接加载 Velocity：

JavaScript

var Velocity = require("path/to/velocity.js");
require("path/to/velocity.ui.js");

/* Your app code here. */
Velocity(document.body, { opacity: 0.5 });

模块加载器：RequireJS

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 });
});