jquery - 如何使用 TweenMax 制作快速上滑动画？

Question

我想使用库“TweenMax”在 jQuery 中做一个类似于函数 slideUp 的动画。不使用 slideUp 的问题是此功能在 iPad 和 iPhone 中速度较慢。

通过使用 TweenMax，它比 jQuery 快 20 倍：D

任何知道这个图书馆的人都可以帮我做吗？

Answer 1

要获得与 jQuery slideUp() 类似的结果，您只需创建一个影响元素高度的 TweenLite 补间：

TweenLite.to(element, 0.5, {height:0})

这是一个 CodePen 示例，可让您切换 slideUp/slideDown 功能。

http://codepen.io/GreenSock/pen/AzHmc

至于声称，GSAP 的运行速度比 jQuery 快 20 倍，请随意尝试速度测试： http ://www.greensock.com/js/speed.html

需要注意的是，在中度到重度压力下，性能提升最为明显。对于单个补间，您很可能不会注意到太大的差异。

Answer 2

极客大使的例子并不适合我。我最终改为动画底部，在 -100% 和 0 之间交替。

向上滑动：

TweenMax.to(element, 0.3, {bottom: 0});

并退后：

TweenMax.to(element, 0.3, { bottom: "-100%"});

Answer 3

首先你应该下载 TweenMax.min.js 和 jquery.gsap.min.js 你可以在这里找到它们：http: //greensock.com/products/

只需将这些文件添加到您的脚本中

src="js/TweenMax.min.js"

src="js/jquery.gsap.min.js"

然后，要为事物设置动画，您可以使用常规的 jQuery.animate() 方法

您可以在此处查看更多详细信息：http: //greensock.com/jquery-gsap-plugin