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)部分。例如，如果速度js代码中的scale为2，则动画在800毫秒内从1-> 2开始。

任何帮助将不胜感激。非常感谢你！

Answer 1

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

通常，transform属性的使用并不简单，浏览器将易于阅读的“ scale（1）”更改为“ matrix（...）”，而Velocity不会（当前）尝试解析它（很容易出错，所以我们一直在避免它）。

相反，您应该使用ForceFeeding-这意味着您需要将“开始”和“结束”值都提供给Velocity，因此无需猜测您的实际含义。

此外，由于前提本身太坏（例如，不再有任何scale属性），已经删除了Velocity V1的整个快捷方式部分-您需要直接使用transform属性-

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

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

比例1的Velocity js

1 个答案: