使您的网站与velocity.js（无jQuery）进行互动和乐趣

>本文介绍了朱利安·夏皮罗（Julian Shapiro）的高性能JavaScript动画库Velocity.js，展示了其功能而不依赖JQuery。 这是探索CSS以外的动态DOM动画库的系列中的第三个。 以前的文章涵盖了Anime.js和Kute.js.

特别感谢詹姆斯·希伯德（James Hibbard）和速度开发人员以及社区贡献者的支持。

> velocity.js的关键特征：

>

> velocity.js是为CSS属性，转换，SVG和滚动事件动画的强大工具，都在Vanilla JavaScript中。 它的灵活的API类似于JQuery's，提供了循环，延迟，缓解选项（包括春季物理学）和持续时间控制等功能。 forceFeeding允许精确定义动画开始和结束值。 此外，它提供了对动画序列的控制（停止，暂停，逆转，恢复）。 速度UI包通过预构建的效果和自定义动画创建扩展功能。

动画元素：$.animate()

> velocity.js动画：

>数字CSS属性（包括颜色）

变换

> svg属性
滚动事件（页面或容器）
淡出和幻灯片
• >注意：通常一次为一个数字属性而动画。 对于多轴翻译（例如，
和
• ），请使用单独的属性。 ForceFeeding提供了一个例外，允许同时进行价值规范。
>

选项：translateX translateY

>速度的选项对象提供灵活性：

>（毫秒）

（jQuery UI，CSS3宽松，bezier曲线，春季物理）
• duration（无限的重复次数或
）
• > easing
>（毫秒）
• loop true>请参阅完整选项列表的速度文档。
>
• delay语法：
>

> velocity.js共享jQuery的API，使jQuery用户可以轻松过渡（替换为

>>），它在无jQuery的情况下完美地发挥了功能。 基本语法是：

>链接动画：

动画多个元素：$.animate() $.velocity()

> unit（

Velocity(element, {property: value}, {option: optionValue});

，

，

，

Velocity(element1, {property: value}, {option: optionValue});
Velocity(element1, {property: value}, {option: optionValue});

，

，

，

const elements = document.querySelectorAll('<div>');
Velocity(elements, {property: value}, {option: optionValue});

）。 如果省略了速度侵入单位（通常

）。 还支持相对数学（px，%，rem，em）。vw/vh> degpx> forcefeeding： = -=而不是依靠velocity.js检索初始值，而是使用forceFeeding：>

Velocity(element, {property: value}, {option: optionValue});

阵列包含：最终值，可选的宽松和启动值。>

动画控件：> >使用：

控制动画

• Velocity(elem, 'stop');
• Velocity(elem, 'pause');
• Velocity(elem, 'reverse');
• Velocity(elem, 'resume'); 然后，该文章提供了几个演示（落球，按钮控制的弹跳球，滚动动画，SVG动画以及使用速度UI包），以说明这些概念。 每个演示的代码可通过文章中的Codepen链接获得。 最后，本文以FAQ部分结束，涉及常见速度。JS使用问题，包括无jQuery的使用。 本文还包括有关进一步学习的其他资源的部分。

以上是使您的网站与velocity.js（无jQuery）进行互动和乐趣的详细内容。更多信息请关注PHP中文网其他相关文章！