Question

我是JS的新程序员。我正在尝试在JS上学习一些HTML动画，并且发现了一个名为“ VelocityJS”的惊人软件包。但是当我使用

$ele.velocity("fadeIn")

我的Chrome不断抛出错误：

VelocityJS: First argument (fadeIn) was not a property map, a known action, or a registered redirect. Aborting.

现在在official website中，在“命令”-“淡入和淡出”一章中，有2个示例，包括用法。但据我测试，它仅适用于1.5.0以下的版本。我希望我能被告知2.0.0版（也称为Velocity V2）之后是否有替代品？

在“基本知识：性能”一章中，有人告诉我们从不使用jQuery的$ .animate（）和$ .fade（）函数。他们放慢了其他一切的速度，包括其他动画库。

JS文件

try {
$(test).velocity("fadeIn", { duration: 1500 }).velocity("fadeOut", { delay: 500, duration: 1500 });
} catch {}

HTML文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.js"></script>
<div id='test' style="background-color:black">
    some place holder
</div>

将上面的文件复制并粘贴到codepen.io上的example

这提供了正确的输出。但是此页面的Velocity版本是 https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js 由于要更改“ marginTop”属性，因此需要使用更高版本。但是我找不到最新版本的任何文档。

在1.5.0版中，“ marginTop”或“ margin-top”均无效。在版本2.0.0-2.0.5中， $（elementID）.velocity（“ fadeIn”，{duration：1000}）没有效果。到目前为止，修复任何一个对我来说都很好。

谢谢。

Answer 1

Velocity V2尚处于测试阶段。您始终可以将CSS属性直接用于以下操作：

element.velocity({
    p: { opacity: 1 },
    o: { duration: 1500 }
}).velocity({
    p: { opacity: 0 },
    o: { delay: 500, duration: 1500 }
});

主站点上尚未维护有关V2的文档。您应该在Github wiki

中引用文档

版本2.0.0+（包括2.0.5）的速度“ fadeIn”问题

1 个答案: