如何在浏览器中模拟页面过渡动画(类似于移动设备中的页面滑动)?

时间:2012-11-02 18:15:26

标签: html5 animation jquery-animate css-transitions

我有一个网页,显示当前一周的图片库,我有一个顶部栏导航“上一页”和“下一页”链接循环浏览画廊。当前单击链接会导致整个页面刷新。如果我们点击“下一步”我们动画下一页内容从右到左的滑入,反之亦然,我认为用户体验会更顺畅,如果我们点击“上一步”,我们会动画前一周的结果来自从左到右(类似于滑动时页面转换在移动应用中的工作方式)。注意,我不需要检测实际的滑动手势,我认为jquery移动标记过度。

要预加载将要滑动的数据,我可以进行ajax调用,甚至可以在json中预先加载数据,以构建替换html关闭屏幕。我将使用html5窗口历史推送状态将URL更改为我们将导航到的实际位置。我唯一无法找到的是做实际的动画。我已经调查了旋转木马,但他们都没有做我想要的。是否存在仅处理页面过渡动画的现有库,具有轻微的反冲反弹效果?

感谢。

编辑:我刚刚找到了jquery.animate,我认为可以解决这个问题。

1 个答案:

答案 0 :(得分:0)

您可能想要选择任意数量的基于jQUery的图库库。如果你找不到一个你想要的方式在不同的画廊之间转换,那么使用jQuery异步加载新的画廊然后将它们设置到适当位置应该不成问题。