sui mobile ajax实例,SUI Mobile 完美关闭过渡动画

在sui mobile中，如果性能不好，页面切换动画反而会带来不好的体验，会起到负面的影响，本人在项目初期就遇到这个问题，为此我下决定要取消这个切换动画。

在论坛中寻求解决办法，有人告诉我设置router：false，我于是试了试，但是返回按钮动画也没有了。这不是我想要的效果，于是我追寻router参数判断的位置，找到几组事件，其中都有注释。

* 事件

* pageLoad* 系列在发生ajax加载时才会触发；当是块切换或已缓存的情况下，不会发送这些事件

*  - pageLoadCancel: 如果前一个还没加载完,那么取消并发送该事件

*  - pageLoadStart: 开始加载

*  - pageLodComplete: ajax complete 完成

*  - pageLoadError: ajax 发生error

*  - pageAnimationStart: 执行动画切换前，实参是event，sectionId和$section

*  - pageAnimationEnd: 执行动画完毕，实参是event，sectionId和$section

*  - beforePageRemove: 新document载入且动画切换完毕，旧的document remove之前在window上触发，实参是event和$pageContainer

*  - pageRemoved: 新的document载入且动画切换完毕，旧的document remove之后在window上触发

*  - beforePageSwitch: page 切换前，在pageAnimationStart前，beforePageSwitch之后会做一些额外的处理才触发pageAnimationStart

*  - pageInitInternal: (经init.js处理后，对外是pageInit)紧跟着动画完成的事件，实参是event，sectionId和$section

*

其中 pageAnimationStart、beforePageSwitch事件在页面切换时都有效果，但是还是不够理性，大家去掉该事件体验下就知道了。

Animation 时间中涉及几个切换class样式

'page-from-center-to-left',

'page-from-center-to-right',

'page-from-right-to-center',

'page-from-left-to-center'

结果发现class 里面有过渡效果为400ms，就是因为这个画面切换特效为0.4s而产生切换效果。为此只要把这个值改得很小，肉眼就不能察觉到了。

在自己的css样式中修改过渡响应时间，完美解决

/*修改左右切换样式*/

.page-from-center-to-left {

-webkit-animation: pageFromCenterToLeft 0ms forwards;

animation: pageFromCenterToLeft 0ms forwards;

}

.page-from-left-to-center {

-webkit-animation: pageFromLeftToCenter 0ms forwards;

animation: pageFromLeftToCenter 0ms forwards;

}

.page-from-right-to-center {

-webkit-animation: pageFromRightToCenter 0ms forwards;

animation: pageFromRightToCenter 0ms forwards;

z-index: 2002;

}

.page-from-center-to-right {

-webkit-animation: pageFromCenterToRight 0ms forwards;

animation: pageFromCenterToRight 0ms forwards;

z-index: 2002;

}

这样就ok了，具体效果可以参见”亿升财富微信站“！