2012-08-12 52 views
0

是否有可能创建一个webkit页面动画,当我点击一个链接转到不同的页面时,我可以做一个左右擦拭或左右擦拭新页面内容,有两个独立的HTML文件,没有AJAX?只是想看看特殊情况下的链接?做webkit页面动画的技巧

因此,对于那些拥有支持webkit的浏览器的人来说,链接会变得很花哨。对于那些没有,它像一个正常的链接。

奖金 - 也让它与mozilla页面动画一起工作。

+0

任何特定的原因,你要避免一个JavaScript库? (jQuery,mootools,dojo等)它可以在更多的浏览器上工作,而且您不必在mozilla和webkit代码之间重新实现它。 – 2012-08-12 06:11:43

+0

平滑过渡,这就是为什么。对于那些可以处理它的浏览器来说,这是一个很好的补充。 – Volomike 2012-08-12 07:01:53

回答

4
  1. 找到所有的外部链接
  2. 上点击...
  3. 防止默认
  4. 应用类主体元素,如“离开”
  5. 使用这个类的CSS动画页面远(如身体。当动画完成时(例如setTimeout与CSS动画同一时间)window.location到链接的href
  6. 在所有内部页面上,具有默认的“预加载”类
  7. 删除dom准备好的类
  8. 删除该类后,将执行“离开”类所做的反转动画,以便页面滑入到位。

在这样做的过程中,你必须基本上“褪色到白色”,但它很接近。

2

简短答案是“否”,因为您无法使用Ajax获取传入页面的HTML。也就是说,一旦您检索到传入页面的HTML,就可以在所有现代浏览器中使用纯CSS进行动画。

+0

Jonathan,如果我们要先动画现有的页面,然后允许超链接通过,然后动画下一页?那会很近吗? – Volomike 2012-08-13 03:42:23

+1

是的,这是可能的,但你必须完全禁止传入的内容,直到整个页面加载完成。您还必须使用JavaScript劫持所有页面链接才能延迟默认导航,以便让传出页面在视图外动画。换句话说,你会放慢你的网站每次点击至少几秒钟。不理想,恕我直言:) – 2012-09-29 23:01:42