问题标签 [velocity.js]

我正在尝试在一些包含用 Velocity.js 构建的动画的函数上运行一些 Jasmine 规范

该方法如下所示：

我正在尝试测试页面的标题是否更改为新标题。这是我的茉莉花规格：

现在，我使用 requirejs，并$.Velocity.mock = true在任何测试之前添加一个 shim，以便动画持续时间变为零（尽管实际上它更像是 16 毫秒来获取下一个动画帧）。

我已经在动画运行之前验证了这$.Velocity.mock确实是真的，当单独运行规范文件时，这工作得很好，但是当运行我的整个套件时，它测试了几个不同的动画，其中一些总是失败。

我尝试使用setTimeout而不是 sinon 的假计时器，我尝试将时钟滴答设置为一个非常大的数字（例如 100000），并且我还在$.Velocity.mock相关动画之前添加了这些，但这些都不能解决问题。

失败看起来像这样：

速度动画类在那里，动画的complete回调从未被调用过。

我正在使用 Velocity.js 和 Blast.js 在每个单词中创建一个简单的加载作为动画......基本设置之一。我也在 Cycle2 旁边使用它。

我有一些我试图实现的问题，我无法从文档中解决。“速度/爆炸功能”可以存在于整个循环 2 滑块中的许多幻灯片上，因此每次都需要重新运行。

这就是我想要实现的目标：

1. Velocity 动画每次都需要从 opacity:0 开始......所以当你循环到幻灯片时，它会从 0 运行到 1，而不是显示它，然后隐藏它，然后运行动画。
2. 当您循环下一个/上一个滑块时，它应该像以前一样重新运行并从 0 开始。
3. 删除每个单词的过渡/淡入淡出，并将其作为显示/隐藏。

我希望这是有道理的。我已经创建了一个简单的 JSFiddle 来向您展示基本设置以及我到目前为止所拥有的内容。希望你能帮忙。

http://jsfiddle.net/h3vo8LL1/1/

继此处发布的解决方案之后：Velocity.js/Blast.js 从 0 开始不透明度

我正在使用 Velocity.js 和 Blast.js 在每个单词中创建一个简单的加载作为动画......基本设置之一。我也在 Cycle2 旁边使用它。我也在使用 fullpage.js，所以有时文本幻灯片可能是第一张幻灯片，那么向下滑动时是否可以做同样的事情？

1. 如果带有动画的文本幻灯片也是第一张幻灯片，则从 opacity:0 触发动画，就像导航上一个/下一个一样。

我已经设置了一个 JSFiddle，添加了 fullpage.js，所以如果你向下滚动，我已经让第二部分以文本开头，但它没有动画或显示。如果有帮助，我还添加了 onLeave 和 afterLoad 回调供您使用？jsfiddle.net/h3vo8LL1/4/

我正在尝试学习使用 Velocity JS 来制作一些 SVG 效果，现在我正在尝试做一个简单的闪烁效果，但我实际上不确定如何让它看起来更逼真。目前我正在使用该r属性并且缓动看起来很傻。任何人都可以为我提供一些关于创建更逼真的效果的建议吗？就像我如何从眼睛中心眨眼，闪烁几次，延迟然后重复？

链接： http ://codepen.io/styler/pen/XJYWgr?editors=101

JS

我试图让离开动画与速度和角度一起工作，以便当表格行离开时它们向右移动。

在示例中，我使用离开回调来尝试为 ng-repeat 的离开设置动画，但回调运行但没有任何反应！

它显然不起作用：

在不指定起始颜色的情况下，它会从白色转换为指定的颜色。

如果开始/结束颜色用十六进制指定，同样的事情

如果使用 rgba 值指定颜色，alpha 为 0 为起始颜色，alpha 为 1 为结束颜色，没有过渡，它立即获得结束颜色

如果有人对此有线索或替代方案（重点是将svg填充颜色从透明变为彩色，不关心速度），那就太好了

我尝试使用 jQuery 的 .animate 和 velocity.js 来执行圆周运动。然而，无论我做什么，动画都是生涩的——你可以看到元素捕捉到像素网格；例如，您可以看到元素向右移动一个像素，然后向下移动一个像素。是什么导致了这个问题？是否可以通过使用一些第三方插件或某种插值来使动画流畅？

这是我的运动代码：

这是我的 jsfiddle：圆周运动

谢谢！

运行velocity.js做svg动画时显示ie 11崩溃的js小提琴

只需左键单击旁边带有 f 的箭头

这只发生在 IE 11 中，可能也发生在其他版本的 IE 中。

Chrome 看起来工作正常。

HTML

有没有办法将动画链接在一起，velocity.js然后按顺序反转它们。我知道您可以反转最后一个链接的速度动画，但是您如何逐步完成之前的调用。

例如：

这只会逆转最后一步，即旋转。您如何按顺序颠倒其他人？

我正在尝试使用 Velocity.js 和 Modernizr 为基于 CSS3 的动画包含 Microsoft Internet Explorer 8 的 JavaScript 后备。这是我正在开发的网站（这是一个关于跨浏览器兼容性的案例研究）。

http://bit.ly/1G03UMo

我就是这样做的。

Modernizr 测试（csstransforms、csstransforms3d 和 cssanimations）都返回一个合乎逻辑的答案 - IE 中的“no-xxx”。nope 数组中提到的文件都在这种情况下加载。

animatie.js 文件的内容如下。

我很确定 jQuery 代码是正确的，因为输出到控制台会产生可预测的结果。我也很确定 Velocity.js 已加载，因为像 opacity 这样的枯燥属性动画实际上在每个浏览器中都有效。

在 Velocity.js 文档中，我发现它实际上并不需要 jQuery 来执行它的魔力，但它应该包含在 IE8 中以使其工作。

我排除了一些事情。

• 它几乎不可能是语法错误。查了三次。
• 它与加载顺序没有任何关系。加载 animatie.js 文件时似乎加载了 jQuery。yepnope 库也尊重所提及文件的顺序。
• 不可能是 Velocity.js，因为作者比我聪明得多，而且没有太多抱怨它在 IE8 中不起作用。

（我知道，旋转齿轮不会影响或破坏用户体验，但我想知道这里发生了什么）。

任何帮助是极大的赞赏。