规模 1 的速度 js

Question

我真的刚开始同时学习 jquery 和速度来制作动画。我正在阅读 velocity.js 文档并试图操纵我的盒子的 "scale" 和运行遇到一些麻烦。基本上我有这个代码：

HTML:
<div id="box"></div>

CSS:
.box {
   background-color:red;
   height:300px;
   width:300px;
   transform:scale(0.3);
}

Velocity JS:
$("#box").velocity({
   scale:1,
   }, {
   duration: 800
});

想法是盒子一开始会显得很小（原来大小的 30%），当 Velocity JS 触发时，它会在 800 毫秒时缩放到正常大小。问题是当我设置比例时，它完全忽略了 css 的 transform:scale(0.3) 部分。例如，如果 velocity js 代码中的 scale 为 2，则动画在 800 毫秒内从 1 -> 2 开始。

非常感谢任何帮助。非常感谢！

Answer 1

请记住，velocityjs.org 网站文档已过时（它们指的是不再受支持的 Velocity V1）- 请转到 Velocity Wiki 并继续阅读。

一般来说transform 属性不好用，浏览器把好看的"scale(1)"改成了"matrix(...)"，Velocity不t（当前）尝试解析它（很容易出错，所以我们一直在避免它）。

相反，您应该使用 ForceFeeding - 这意味着您向 Velocity 提供起始值和结束值，因此它不需要猜测您的实际含义。

此外，Velocity V1 的整个快捷方式部分已被删除，因为前提本身太破（即不再有任何 scale 属性） - 您需要使用 transform 属性直接-

$("#box").velocity({ transform: ["scale(1)", "scale(0.3)"], }, { duration: 800, });

这里应该比较清楚，ForceFeeding 是一个具有“[to, from]”布局的数组。您还可以在它们之间添加特定的缓动，但请查看文档以获取更多信息。

规模 1 的速度 js

Velocity js for scale 1

javascript

animation

velocity

velocity.js