当前位置: 首页 > 工具软件 > SUI Mobile > 使用案例 >

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

裴理
2023-12-01

在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了,具体效果可以参见”亿升财富微信站“!

 类似资料: