webkit 滑入滑出页面答案

【问题标题】：webkit slide in and slide out a pagewebkit 滑入滑出页面
【发布时间】：2011-11-16 21:05:33
【问题描述】：

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

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

有什么提示可以进行这个实现吗？或者我应该使用 jqTouch 吗？

【问题讨论】：

【解决方案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 平移到水平尺寸。同时，导航列表移动相同的方向和距离。
单击后退时，视图的尺寸再次确定（以防窗口大小发生变化），导航和内容向右平移，隐藏内容并再次显示导航。
重复

我可能不知道这个确切的样本是如何完成的，但是……嗯，这会奏效。

你不会那么为这样的事情使用框架，但我可以理解想要做一个自定义工作。对用户来说肯定会更快，但对你来说更慢。根据您的意图，这很好。

edit：如果您只是为使用 webkit 的用户提供此功能，则使用框架就更没有必要了……如果您不担心跨浏览器支持，那么这里真的没有太多事情可以做' t 使用原始 javascript 轻松完成。

例如，我在大多数情况下使用 jQuery 的唯一原因是为了确保在大多数用例中一切正常。它只是解决了很多事情......即使 95% 的框架没有被利用，当你有最后期限时，它也是值得的。

【讨论】：

感谢您的回答。我正在为 iphone 构建应用程序，所以这就是为什么只实现动画会很棒。你知道解释这个动画的好来源吗？
在这种情况下，最好使用 css3 为页面设置动画。它会更顺畅一些。我不知道你会怎么做......我想你会像我描述的那样使用javascript定位页面，然后用css将它们滑入。让我研究一下……也许我可以一起扔一个 jsfiddle。