HTML 中类似桌面的过渡效果答案

【问题标题】：Desktop like Transition effect in HTMLHTML 中类似桌面的过渡效果
【发布时间】：2012-10-07 12:08:08
【问题描述】：

我想在我的 HTML Web 应用程序中创建导航幻灯片动画效果。我只是想知道这是否可能。

场景是：第 1 页 = 联系人列表，第 2 页 = 联系人详细信息。

当用户在列表中选择一个联系人并单击详细信息时，我希望联系人列表向左滑动，而联系人详细信息从右侧滑入（就像 iOS 导航应用程序一样）。

这可能吗？联系人列表和详细信息是两个单独的网页。

任何建议将不胜感激。

谢谢

【问题讨论】：

【解决方案1】：

我的第一个想法是使用 Jquery 移动转换。那个框架真的很接近iOS的UI

但是你必须更清楚你所说的单独网页是什么意思。如果您使用动态内容，则可以使用 iframe、锚标记甚至 ajax 调用。

我个人更喜欢 Jquery 的移动方法。每个“页面”都包含在单个 html 文档中带有页面标记的 div 中，也可以加载具有不同过渡效果的其他 html 页面

【讨论】：

不是每个页面都是一个单独的“页面”，即不同的超链接（不是 # 哈希客户端路由）。但是还是要给出平滑过渡的效果。我知道在转换与实际页面加载之间会有轻微的碰撞，但是一旦页面在缓存中，这种碰撞应该是次要的。
查看 jquery mobile jquerymobile.com/test/docs/pages/page-cache.html 的缓存方法我建议避免使用单独的，因为您希望没有延迟。如果您想避免使用 jquery mobile，请查看这个简洁的示例 fasw.ws/faswwp/non-jquery-page-transitions-lightweight