如何使用css转换重新创建我的jQuery .animate()元素zoom/pan？

Question

我把一个jsFiddle放在一起来说明我的问题:

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

我有一个功能,它将平移和缩放到指定的元素.这用于在漫画书中创建帧之间的过渡.

我使用jQuery的.animate()工作正常,但是我想在可用时使用css转换,因为它们在现代浏览器上表现得更好.

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

而不是在这里描述得不好,如果你看一下jsFiddle,你会看到两组控件,每个按钮对应一个"漫画"中的一个框架.jQuery动画控件正常运行,而css转换控件则没有.

问题似乎是在使用css-transforms缩放元素后测量offset()属性.

任何帮助将不胜感激.

注意:当将方法从.animate切换到转换时,您将需要'重新运行'jsFiddle,反之亦然,以便重置在函数运行时修改的CSS.

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

Answer 1

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