webkit滑入并滑出页面

时间:2011-11-15 15:07:11

标签: animation css3 webkit

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

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

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

2 个答案:

答案 0 :(得分:0)

在这个例子中,有某种(我讨厌模糊......)基于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在需要内容时创建的,然后填充该内容,然后翻译(动画)到视口中。

这是一步一步,从快速浏览页面推断出来:

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

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

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

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

答案 1 :(得分:0)