ionic1页面切换动画卡顿优化
https://github.com/shprink/ionic-native-transitions
https://www.npmjs.com/package/ionic-native-transitions
这个是ionic1的, 推荐使用ionic2开发, 或者ionic-native
Issue & solution
直接使用ionic的css动画, 页面数据较多的时候简直卡成翔了, 使用分页加载也没有太大的改善.
目前最佳方案是使用[]ionic-native-transitions插件](https://github.com/shprink/ionic-native-transitions)
install
# npm
npm install ionic-native-transitions --save
# Using Ionic CLI
ionic cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5
# 报错Probably this is either a connection problem, or plugin spec is incorrect.
# 使用--nofetch来成功安装
cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5 --save --nofetch
Import
可以将ionic-native-transitions目录copy到www\lib下, 再在index.html中引入
<script src="lib/ionic-native-transitions/dist/ionic-native-transitions.min.js"></script>
config
angular.module('yourApp', [
'ionic-native-transitions'
])
.config(function($ionicNativeTransitionsProvider){
$ionicNativeTransitionsProvider.setDefaultOptions({
duration: 400, // in milliseconds (ms), default 400,
slowdownfactor: 4, // overlap views (higher number is more) or no overlap (1), default 4
iosdelay: -1, // ms to wait for the iOS webview to update before animation kicks in, default -1
androiddelay: -1, // same as above but for Android, default -1
winphonedelay: -1, // same as above but for Windows Phone, default -1,
fixedPixelsTop: 0, // the number of pixels of your fixed header, default 0 (iOS and Android)
fixedPixelsBottom: 0, // the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android)
triggerTransitionEvent: '$ionicView.afterEnter', // internal ionic-native-transitions option
backInOppositeDirection: false // Takes over default back transition and state back transition to use the opposite direction transition to go back
});
$ionicNativeTransitionsProvider.setDefaultOptions({
duration: 400, // in milliseconds (ms), default 400,
slowdownfactor: 4, // overlap views (higher number is more) or no overlap (1), default 4
iosdelay: -1, // ms to wait for the iOS webview to update before animation kicks in, default -1
androiddelay: -1, // same as above but for Android, default -1
winphonedelay: -1, // same as above but for Windows Phone, default -1,
fixedPixelsTop: 0, // the number of pixels of your fixed header, default 0 (iOS and Android)
fixedPixelsBottom: 0, // the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android)
triggerTransitionEvent: '$ionicView.afterEnter', // internal ionic-native-transitions option
backInOppositeDirection: false // Takes over default back transition and state back transition to use the opposite direction transition to go back
});
$ionicNativeTransitionsProvider.setDefaultTransition({
type: 'slide',
direction: 'left'
});
$ionicNativeTransitionsProvider.setDefaultBackTransition({
type: 'slide',
direction: 'right'
});
});
crosswork
如果你用了crosswork记得config.xml中添加:
Android
if you are using Crosswalk > 1.3 please add the following to your config.xml
<preference name="CrosswalkAnimatable" value="true" />
tab
我们不期望tab也出现这个切换效果, 禁用tab先的动画
.state('home', {
url: '/home',
nativeTransitions: null,
templateUrl: "templates/home.html"
})
ionic1页面切换动画卡顿优化的更多相关文章
- CSS3 动画卡顿性能优化解决方案--摘抄
最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区, ...
- performance面板使用,以及解决动画卡顿
https://googlechrome.github.io/devtools-samples/jank// 官方案例 https://juejin.im/post/5b65105f518825 ...
- (原)android中的动画(三)之动画监听&页面切换动画
1.动画也可以设置监听事件,例如在动画结束时需要执行某操作 把要执行的代码写在onAnimationEnd()回调方法中即可: anim.setAnimationListener(new Animat ...
- Chrome 下动画卡顿问题的另一种可能
[现象] 动画出现了明显的卡顿,且仅仅出现在 chrome 中. [原因排查] 一开始使用了css动画的时候已经出现了卡顿.找到如下的文章:CSS3 动画卡顿解决方案.深入浏览器理解CSS anima ...
- iOS页面切换动画实现方式。
iOS页面切换动画实现方式. 1.使用UIView animateWithDuration:animations:completion方法 Java代码 [UIView animateWithDura ...
- javascript 手势(swipeLeft,swipeRight)滑动中使用css3动画卡顿,开启硬件加速
今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...
- QtQuick多页面切换、多页面切换动画、多个qml文件数据交互
一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...
- android中app卡顿优化问题
所谓app卡顿原因就是在运行时出现了丢帧,还可能是UI线程被阻塞.首先来一下丢帧现象,android每16ms会对界面进行一次渲染,如果app的绘制.计算等超过了16ms那么只能等下一个16ms才能 ...
- Android性能优化----卡顿优化
前言 无论是启动,内存,布局等等这些优化,最终的目的就是为了应用不卡顿.应用的体验性好坏,最直观的表现就是应用的流畅程度,用户不知道什么启动优化,内存不足,等等,应用卡顿,那么这个应用就不行,被卸载的 ...
随机推荐
- 20165235 学习基础和C语言基础调查
20165235 学习基础和C语言基础调查 首先第一个问题:你有什么技能比大多人(超过90%以上)更好?感觉很难回答这种问题,其实我对很多东西挺感兴趣的,如果非要拿出一种比较突出的技能的话我感觉就是象 ...
- UDF、UDAF、UDTF函数编写
一.UDF函数编写 1.步骤 1.继承UDF类 2.重写evalute方法 .继承GenericUDF .实现initialize.evaluate.getDisplayString方法 2.案例 实 ...
- fetch的总结
&& ) { && ) { }); });
- HDU 5672 String 【尺取】
<题目链接> 题目大意:给定一个只由26个小写字母组成的字符串,现在问你至少包含k个不同字母的连续子序列总数有多少. 解题分析:经仔细研究,我们发现,每次尺取到符合要求的最小区间,然后将区 ...
- 牛客练习赛A 【BFS】
<题目链接> 题目大意: 给出一张图,问你其中 ' # ' 加上那些不能够到达边界的 ' . ' 的点的个数,' # ' 会起阻挡作用. 解题分析: 本题很好做,无非就是将所有能够由边界上 ...
- window下的计划任务
0x00前言: 这几天看了看信息安全就业的面试题,其中有一条是计划任务如何设置,好几个月前稍微接触了,但是很久没用差不多都忘了>_<,这里就稍微学习下windows的计划任务 写着写着就偏 ...
- mybatis之级联关系(一对一、一对多)
0. 表结构 1. 准备工作 1.1 配置文件等信息,请参考 myBatis之入门示例 1.2 entity 1.2.1 TPersonInfo.java package com.blueStarW ...
- MySQL 一对多查询
group_concat简单来说,这个函数的作用就是连接多个字段 数据表首先我们先建立两个表 CREATE TABLE `student` ( `id` ) NOT NULL AUTO_INCREME ...
- JavaScript基础笔记(九)事件
事件 一.事件流 事件流描述的是从页面中接收事件的顺序. 一)事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点. 如:div------>b ...
- 【DWM1000】 code 解密6一TAG 状态机第一步
我们前面分析过,不论ANCHOR 还是TAG,前面变量的初始化基本都是一样的,只是状态机必须明确区分不同的设备类型.我们从开始看TAG.由于初始化TAG的 testAppState一样初始化为TA_I ...