Velocity js for scale 1

Question

为了动画的目的，我刚刚开始同时学习jquery和velocity。我当时正在阅读velocity.js文档，试图操纵盒子的"比例"，结果遇到了一些麻烦。基本上我有这个代码：

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触发时，它会在800ms时缩放到正常大小。问题是，当我设置比例时，它完全忽略了css的transform:scale(0.3)部分。例如，如果velocity js代码中的scale为2，动画将在800ms内从1->2开始。

非常感谢您的帮助。非常感谢！

Answer 1

请记住，velocityjs.org网站文档已经过时(它们指的是不再支持的Velocity V1(，请访问Velocity Wiki并继续阅读。

一般来说，transform属性使用起来并不简单，浏览器会将易读的"scale(1("更改为"matrix(…("，Velocity(目前(不会尝试解析它(很容易出错，所以我们一直在避免它(。

相反，你应该使用ForceFeeding——这意味着你同时为Velocity提供开始值和结束值，所以它不需要猜测你的实际意思。

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

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

应该相对清楚的是，ForceFeeding是一个布局为"[到，从]"的数组。您也可以在它们之间添加特定的轻松操作，但请查看文档以了解更多信息。