mip-shell切换页面时，需要不同的行业shell允许自定义loading样式

[VenyXiong]

背景：
目前mip-shell切换时，页面入场动画都是统一的从右往左滑动入场，但是在小说这个业务中，用户进行翻页操作时，大范围的页面入场，整体交互体验较差，希望可以自定义行业shell的loading入场动画。

诉求：
希望mip-shell能够暴露出来创建loading和页面入场动画的接口，行业shell可以根据需求自行定制。

[easonyq]

满足这个需求目前有两种办法：

1. 覆盖CSS。目前的动画主要就是 <div class="mip-page-loading-wrapper">, <iframe class="mip-page__iframe">, <div class="mip-page-fade-header-wrapper"> 这几个元素在进行。他们都遵循 Vue 的 transition 规范，在动画的各个阶段都会有诸如 slide-enter, slide-enter-to, slide-enter-active 这样的 class。只需要覆盖这些 class，就可以控制动画过程。这也是最无损最推荐的方法。
2. 继承子类并重写切换页面和动画相关的方法。但目前这部分的代码都在page中而不在shell中，我正在进行一次重构，把这部分代码移动到 shell 中来。不过即便完成之后，因为动画和切换页面在一起，还要负责创建 iframe，添加路由规则等等，实际上我觉得这不算是个太好的办法。

[easonyq]

和 #68 一样，解决了会一并关闭

[easonyq]

代码已经合入完毕了。

动画钩子函数

经过重构的 mip-shell 中，会有3个处理动画的函数，子类可以关注：

• beforeSwitchPage(options)
  在切换动画之前调用，供子类继承并修改（如创建自己的动画层等）

• afterSwitchPage(options)
  在切换动画完成后调用，供子类继承并修改（如给其他组件发送通知等）

• switchPage(options)
  动画切换逻辑全部在这里，父类已有实现。但子类如有需要也可继承修改，非必须情况尽量不要继承。

switchPage 内部处理逻辑

在 switchPage 内部还根据动画的方向，是否创建 iframe，是否要跳过动画区分为6个细分方法。子类也可以继承其中的某一个或几个，来实现对动画的精确控制。
和 switchPage 一样，非必须情况尽量不要继承。

在介绍具体方法前，先明晰3组概念：

1. 是否需要动画
   如点击浏览器的前进后退，没有动画效果；点击链接和头部的后退按钮，有动画效果。

2. 是否创建 iframe
   点击链接打开新页面时（或者直接调用 viewer.open 时）会创建 iframe 并把新页面放入其中。而浏览器的前进后退时不创建 iframe，只调用已有的 iframe 展现。

3. 动画方向
   这里的动画方向并不是视觉上的从左到右还是从右到左，而是指逻辑上的方向，分前进/后退。
   只是在默认情况下，前进采用目标页面从右到左进入屏幕的方式；后退等价于当前页面向右侧退出屏幕，目标页面出现在下方的方式。

不需要动画时

创建 iframe	不创建 iframe
skipTransitionAndCreate(options)	skipTransition(optios)

需要动画时

	创建 iframe	不创建 iframe
前进	forwardTransitionAndCreate(options)	forwardTransition(optios)
后退	backwardTransitionAndCreate(options)	backwardTransition(optios)

参数对象 options

所有这些方法的参数对象 options 格式均相同，如下：

• targetPageId
• targetPageMeta
• sourcePageId
• sourcePageMeta
• newPage 是否创建了 iframe
• isForward 是否前进
• onComplete 动画完成后的回调函数

其中 newPage 和 isForward 的值和方法名是一致的。
如 forwardTransitionAndCreate 方法内 newPage 为 true， isForward 为 true；backwardTransition 方法内 newPage 为 false， isForward 为 false
而单纯的钩子函数 （如 afterSwitchPage）则均有可能，由子类自行判断并处理。