JS 动画库 Velocity.js

最新推荐文章于 2025-06-04 18:19:51 发布

原创最新推荐文章于 2025-06-04 18:19:51 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用Velocity.js动画库为网页元素添加动画效果。通过实例展示了如何定义动画属性，如宽度变化，并配置动画参数，包括执行时间、缓动效果、队列管理等。此外，还解释了如何使用回调函数进行动画开始、执行中和结束时的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

参数

$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         // 移动端硬件加速（默认开启）
});