如何使用 css 转换重新创建我的 jQuery .animate() 元素缩放/平移？

Posted 2023-05-08

【中文标题】如何使用 css 转换重新创建我的 jQuery .animate() 元素缩放/平移？

【英文标题】：How can I recreate my jQuery .animate() element zoom/pan using css transform?

【发布时间】：2012-06-14 12:33:48

【问题描述】：

我整理了一个 jsFiddle 来说明我的问题：

http://jsfiddle.net/VbCcA/3/

我有一个可以平移和缩放到指定元素的函数。这用于在漫画书中创建帧之间的过渡。

我使用 jQuery 的 .animate() 可以正常工作，但我想在可用时使用 css 转换，因为它们在现代浏览器上的性能要好得多。

但是我似乎无法正确地重新创建相同的行为。

与其在这里描述得不好，如果你看一下jsFiddle你会看到两组控件，每个按钮对应于'comic'中的一个框架。 jQuery 动画控件行为正确，而 css 转换控件则不正确。

问题似乎在于使用 css-transforms 缩放元素后对 offset() 属性的测量。

任何帮助将不胜感激。

注意：在将方法从 .animate 切换到 transforms 时，您需要“重新运行”jsFiddle，反之亦然，以重置函数运行时修改的 CSS。

编辑：我刚刚更正了指向 jSfiddle 的链接......向那些已经查看过它的人道歉。原始链接缺少示例代码的一部分。另外澄清一下，我需要使用基于百分比的值，因为整个应用程序是完全响应的。

【参考方案1】：

这当然不是最直接的方法，但考虑将 jQuery Transit (http://ricostacruz.com/jquery.transit/) 应用到您的 .animate 版本，看看它如何处理转换为 CSS3 转换。然后你也许可以从那里向后工作。

【讨论】：

感谢 technoTarek，虽然这并没有帮助我解决我的问题（因为在我的用例中，使用运输时问题仍然存在）这是一个优秀的插件，你绝对值得推荐它的道具.干杯