网页切换特效

2015-09-25 本文已影响330人 haolisand

目前网页没有使用任何特效，直接浏览器访问并不觉得难看，不过 App 首页也是用 WebView 加载网页，载入之前空白，载入后直接显示，就很简陋。被催了好几天之后决定解决这个问题。

从时间序上，整个载入过程分为三个阶段

WebView 访问网页到网页返回
网页返回到内容返回
网页内容出现

其中网页能控制的是其中的2和3。找了下主流方案，选用了 animsition。demo 效果很酷炫，不过用到我们网站里遇到了大问题。在目标页面接入 animsition 后，页面一直处于 loading 状态无法正常显示。

debug 后发现该库实现原理是直接先用 css 透明化目标区域内容

.animsition,
.animsition-overlay {
    position: relative;
    opacity: 0;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

然后在 js 中显示 loading 效果

if(options.loading) __.addLoading.call(this, options);

$window.on('load.' + namespace + ' pageshow.' + namespace, function() {
  if(__.settings.timer) clearTimeout(__.settings.timer);
  __.in.call(_this);
});

等 load 事件触发后移除 loading 效果

if(options.loading) __.removeLoading.call(_this);

显示目标内容

$this
  .removeClass(inClass)
  .css({ 'opacity' : 1 })
  .trigger(__.settings.events.inEnd);

而我们网站目前的 requireJS 架构直接等 load 好了之后才会执行页面 js，所以无法收到事件，出现无尽 loading 的假象。

这和 github 上另一个人的问题如出一辙，最奇葩的是作者 close 了这个 issue，但问题仍然完全没被解决 orz

只能自己处理。。

尝试修改既有框架，试图将 js 执行的时机提前，未果。
打算按照 github 上的方案自己修改，又想使用第三方 CDN。
发现有个 trick 可以将 timeout 设为0，果然完美实现页面效果。

虽然只完成了阶段3的部分，不过效果实在酷炫到简直可以忘掉之前两个白屏的阶段 XD

不过问题毕竟不能无视，初步计划未来做 pull to refresh 时顺便将内容全改为 ajax 方式获取。这样阶段1的时间会被缩短，阶段2的事件也可以接收处理，体验应该会更好。

有考虑过WebView自己在调用时显示 loading，不过考虑版本升级等原因，和网页的效果可能不一致，暂时先不处理。

网页切换特效

猜你喜欢

热点阅读