网页切换特效

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

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

1. WebView 访问网页到网页返回
2. 网页返回到内容返回
3. 网页内容出现

其中网页能控制的是其中的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);

注册 load 事件

$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，不过考虑版本升级等原因，和网页的效果可能不一致，暂时先不处理。