【问题标题】:Technique to do webkit page animation做 webkit 页面动画的技术
【发布时间】:2012-08-08 20:04:20
【问题描述】:

是否可以创建一个 webkit 页面动画,以便当我单击链接转到另一个页面时,我可以使用两个单独的 HTML 对新的内容页面进行左右擦除或左右擦除文件和没有 AJAX?只是想为特殊情况添加链接?

所以,对于那些拥有支持 webkit 的浏览器的人来说,这个链接会很有趣。对于那些没有的人,它就像一个常规链接。

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

【问题讨论】:

  • 您避免使用 javascript 库有什么特别的原因吗? (jQuery、mootools、dojo 等)它可以在更多的浏览器上运行,并且您不必在 mozilla 和 webkit 代码之间重新实现它。
  • 平滑过渡,这就是原因。对于那些可以处理它的浏览器来说,这是一个很好的加分项。

标签: webkit css-transitions css-animations


【解决方案1】:
  1. 查找所有外部链接
  2. 点击...
  3. 防止默认
  4. 将类应用于正文元素,例如“离开”
  5. 使用该类对页面进行 CSS 动画处理(例如 body.leaving { transform: translateX: -100%; }
  6. 动画完成时(例如 setTimeout 与 CSS 动画相同的时间)window.location 到链接的 href
  7. 在所有内部页面上,正文都具有默认的“预加载”类
  8. 在 dom 就绪时删除该类
  9. 删除该类会执行“离开”类执行的反向动画,因此页面会滑动到位。

在这样做之间你必须基本上“变白”,但它很接近。

【讨论】:

    【解决方案2】:

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

    【讨论】:

    • Jonathan,如果我们先为现有页面设置动画,然后允许超链接通过,然后为下一页设置动画,会怎样?会很接近吗?
    • 是的,这是可能的,但您必须完全抑制传入的内容,直到整个页面加载完成。您还必须使用 javascript 来劫持所有页面链接以延迟默认导航,以便让传出页面动画化。换句话说,每次点击至少会使您的网站速度减慢几秒钟。不理想,恕我直言:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-03-01
    • 1970-01-01
    • 2011-07-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多