问题标签 [velocity.js]

我在将velocity.js 集成到我现有的webpack 框架中并让它作为对jquery 的依赖项时遇到了极大的困难。

本质上，velocity.js 期望 jquery（或 $）在全局对象上可用，以便它可以增强功能，从而可以实现以下功能$(elem).velocity。我曾尝试使用“expose-loader”将两者都暴露jquery在$窗口中，但遇到了错误global is not defined。以下是我的 webpack 配置的摘录

我也尝试过使用非缩小版。这是加载jquery的错误所在：

我不知道暴露加载器是如何工作的，也无法理解上述的意义，特别是因为我能够将velocity.js'暴露Velocity给全局窗口。

作为后备，我不得不var Velocity = require("velocity")进入我的应用程序文件并使用velocity.js，就像没有可用的jquery一样，即

任何帮助或建议将不胜感激。

我正在使用 Velocity.js 制作动画。

我首先平移和旋转一个对象。动画完成后，我需要将对象再旋转 360 度。

问题是在第二个动画期间，旋转轴是关闭的。对象不是围绕中心旋转，而是围绕其原点旋转。

可能是什么问题？

更新

演示该问题的 Codepen：http ://codepen.io/anon/pen/MYZaaj

我正在使用 Velocity.js 制作动画。

移动 SVG 图像同时围绕中心旋转的正确方法是什么？

我想使用 Velocity JSSVG group从中心旋转一个。transform-origin: 50% 50%;这在 Chrome 中运行良好，但我注意到转换原点在IE and Firefox. 我尝试设置一个额外的变换原点值，并尝试将变换原点设置为像素而不是 % 等，但没有运气。谁能解释如何解决这个问题？

我在这里有一个演示http://codepen.io/styler/pen/wBRPEa?editors=101

代码片段

CSS

JS

我试过旋转一个平原div，正确的变换原点工作正常，似乎与 SVG 相关。

所以我在隐藏的页面上有一些文本，当我单击按钮时，文本会显示为“transition.slideDownIn”，当单击按钮时，文本会再次使用“transition.slideDownOut”隐藏。问题是读者在页面的下方，我希望将它们打包到向下/向上滑动的文本的父 div，理想情况下与 slideDownOut 同步动画。我尝试了几种不同的东西（队列等）但我似乎无法弄清楚我做错了什么。我是在错误地解决问题还是滥用功能？

以下是我最近的尝试。

我对速度 JS 比较陌生。我想介绍一些字符（包含图像 URL 和名称的对象），例如图像和名称交替来自左右的转换序列。我已经编写了代码并且它可以工作，但是有一个主要问题，我觉得我的方法存在一些概念上的错误。

不幸的是，我无法从大系统中取出一个工作代码示例。但基本上在 Backbone JS 中，我选择元素并将其 .html() 设置为数据库中的某些内容，并将此调用与对速度的调用链接起来。

举个例子：

这有效，但按以下顺序：

1. 首先，元素在容器中显示片刻。
2. 然后velocity的调用动画对象进出。

我怎样才能摆脱上面的 1. 即在链式调用执行之前，有没有办法让元素在速度动画开始之前不可见？

我正在尝试使用启动器基础主题 JointWp ( http://jointswp.com/ ) 让速度 ui 在我的 wordpress 安装上工作，但不是这样。到目前为止，我使用以下本教程成功地将velocity.js 排入队列：

（http://code.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins--wp-24321）

但速度 ui 不起作用。目前我有这 3 行：

1) wp_enqueue_script('jquery', get_template_directory_uri().'/foundation/js/vendor/jquery.js', array(), '2.1.0', false);

2) wp_enqueue_script('velocity', get_template_directory_uri() .'/foundation/js/vendor/velocity.min.js', array(), false);

3) wp_enqueue_script('velocity-ui', get_template_directory_uri() .'/foundation/js/vendor/velocity.ui.min.js', array('velocity'), false);

1) 第一行默认是 jquery enqueue (很好用),

2）我加入velocity.js（也很好用），

3) 没有显示任何错误但不加载速度 ui，因为动画永远不会发生。我尝试不包括对速度的依赖，将名称从“velocity-ui”更改为“velocity”，如第二行所示，但发生了很多疯狂的事情，但什么也没发生。

所以......有人对我如何做到这一点有任何想法吗？正如我告诉你的那样，如果你能帮助我一点，我将不胜感激，因为我试图在网上找到一个解决方案，但没有任何内容。

首先，我是 svg 的完整初学者，我在 Google 上找不到解决问题的好答案。我一直在尝试做的只是在悬停时为 svg 路径设置动画。

我已经下载并使用了 snap.svg 和 velocity.js，因此，如果您知道使用其中之一的答案，或者可能是展位，请随意。

我当前的代码和我尝试的速度：

JS：

JS 小提琴演示：

这里

如何使用velocity.js 实现无限的背景图像滚动？我说的是这样的：http:
//jsfiddle.net/UHgF8/5/

这可以通过关键帧轻松完成，但是通过速度，我得到了每个间隔的步骤（进度）部分的堆栈。

谢谢

g 标签为某些动画接收它自己的动画标签。但它似乎非常有限地用于高级动画。我们有用于动画的 jQuery animate，它非常有用，但由于限制，我们不能专门使用它来为 g 标签设置动画。我想问一下，假设它有一些id或classname设置它，我还必须有哪些其他选项来为 g 标签设置动画。snap.svg一方面可以利用图像svg并对其进行解释。但是，我不想使用它。我更喜欢使用svg标签并让事情变得更简单。看到这个小提琴我想将动画应用于立方体。我对任何框架都持开放态度，但只想知道这是否可能以及实现的正常方法。如果是，我将非常感谢您提供参考链接和/或示例代码以正确实现相同的答案。SO在问这个之前我已经搜索过了。这是代码示例。我不是在寻找 CSS3 动画和过渡，因为IE9+是必须的。

SVG