Question

我是webkit动画的新手，我一直在尝试做这种动画 http://demo.jeffrey-way.com/tutsMobile/#site.php?siteName=psdtuts 如果单击列表元素，您将看到页面滑入和滑出。

我想将这个动画实现到我的应用程序，该应用程序是使用backbone.js，underscore.js，zepto.js构建的我可以使用jqTouch或jquery mobile，但我想尽可能减轻重量，因为我只为IOS构建它。所以这就是我不想自己实现的。

有任何提示可以实现此实现，还是应该使用jqTouch？

Answer 1

在这个例子中，有某种（我讨厌模糊......）基于ajax的内容加载系统。看一下来源：

<div data-role="page" id="article.php?siteName=psdtuts&amp;origLink=http%3A%2F%2Fpsd.tutsplus.com%2F%3Fp%3D15026" class="ui-page ui-body-c">

第一次访问时，该div不存在。它是由javascript在需要内容时创建的，然后填充该内容，然后翻译（动画）到视口中。

这是一步一步，从快速浏览页面推断出来：

加载了基页，包括css，javascript，nav list
脚本正在等待单击导航项。
点击后，对与被点击项目对应的内容发出ajax请求;由href="article.php?siteName=psdtuts&origLink=http://psd.tutsplus.com/?p=15081"确定。我猜？此ajax请求从psdtuts.com获取内容，可能在数据库中。
当这些东西加载时，javascript显示加载动画。加载完成后，它会再次隐藏。
创建新的内容填充div后，它将被赋予一个默认位置，其左边缘位于屏幕右边缘之外。一旦被定位，javascript就会确定视图的尺寸并在横向尺寸上平移div。同时，导航列表的移动方向和距离相同。
单击后退时，将再次确定视图的尺寸（如果窗口大小已更改）并且导航和内容已转换为右侧，则隐藏内容并再次显示导航。
重复

我可能不知道这个样本的完成方式，但是......好吧，这样可行。

你不会疯狂使用这样的东西的框架，但我可以理解想要做一个自定义的工作。用户肯定会更快，但对你来说速度较慢。根据你的意图，这很好。

编辑：如果您只向使用webkit的用户提供此服务，那么使用框架就更不用了了......如果您不担心跨浏览器支持，那么这里真的不是很多用原始的javascript轻松完成。

我使用jQuery的唯一原因，例如，大多数时候，是为了确保在大多数用例中工作正常。它只是平滑了很多东西......即使95％的框架没有被利用，但是当你有一个截止日期时它是值得的。

Answer 2