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页面切换动画卡顿优化的更多相关文章

  1. CSS3 动画卡顿性能优化解决方案--摘抄

    最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区, ...

  2. performance面板使用,以及解决动画卡顿

    https://googlechrome.github.io/devtools-samples/jank//    官方案例 https://juejin.im/post/5b65105f518825 ...

  3. (原)android中的动画(三)之动画监听&页面切换动画

    1.动画也可以设置监听事件,例如在动画结束时需要执行某操作 把要执行的代码写在onAnimationEnd()回调方法中即可: anim.setAnimationListener(new Animat ...

  4. Chrome 下动画卡顿问题的另一种可能

    [现象] 动画出现了明显的卡顿,且仅仅出现在 chrome 中. [原因排查] 一开始使用了css动画的时候已经出现了卡顿.找到如下的文章:CSS3 动画卡顿解决方案.深入浏览器理解CSS anima ...

  5. iOS页面切换动画实现方式。

    iOS页面切换动画实现方式. 1.使用UIView animateWithDuration:animations:completion方法 Java代码 [UIView animateWithDura ...

  6. javascript 手势(swipeLeft,swipeRight)滑动中使用css3动画卡顿,开启硬件加速

    今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...

  7. QtQuick多页面切换、多页面切换动画、多个qml文件数据交互

    一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...

  8. android中app卡顿优化问题

     所谓app卡顿原因就是在运行时出现了丢帧,还可能是UI线程被阻塞.首先来一下丢帧现象,android每16ms会对界面进行一次渲染,如果app的绘制.计算等超过了16ms那么只能等下一个16ms才能 ...

  9. Android性能优化----卡顿优化

    前言 无论是启动,内存,布局等等这些优化,最终的目的就是为了应用不卡顿.应用的体验性好坏,最直观的表现就是应用的流畅程度,用户不知道什么启动优化,内存不足,等等,应用卡顿,那么这个应用就不行,被卸载的 ...

随机推荐

  1. Node.js实现网络编程

    http://www.cnblogs.com/myzhibie/p/4579122.html

  2. 【LeetCode算法-20】Valid Parentheses

    LeetCode第20题 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determin ...

  3. centos6.5安装/升级到python2.7

    https://www.cnblogs.com/harrymore/p/9024287.html

  4. linux下安装node踩坑总结

    1.在node官网下载linux二进制文件(确定文件的类型)本文以二进制文件为例 2.放入linux的对应目录下之后: tar -xvf node-v10.15.3-linux-x64.tar.xz ...

  5. 网络基础配置--开启SSH,关闭Telnet

    1.Telnet和SSH对比 1.1.TELNET 使用Telnet这个用来访问远程计算机的TCP/IP协议以控制你的网络设备相当于在离开某个建筑时大喊你的用户名和口令.很快会有人进行监听,并且他们会 ...

  6. word插入行

    如何在Word中添加多行或多列 在弹出的列表中选择[插入],再选择[在下方插入行]即可. 选择多少行就可添加多少行. 按F4重复上一操作可快速添加. 添加列也同样如此,选中一个单元格,右键单击,在弹出 ...

  7. Codeforces.GYM100548G.The Problem to Slow Down You(回文树)

    题目链接 \(Description\) 给定两个串\(S,T\),求两个串有多少对相同回文子串. \(|S|,|T|\leq 2\times 10^5\). \(Solution\) 好菜啊QAQ ...

  8. 克罗内克符号kronecker_delta

    Kronecker delta 克罗内克函数 Wiki 维基百科 Kronecker delta 定义 \[\delta _{{ij}}={\begin{cases}0&{\text{if } ...

  9. bzoj3255 一个关于序列的游戏

    题意是啥 给你一个数列,可以任意删去一段,记其长度为$s$,得到$val_s$的价值,问你最大价值和为多少.. 其中这一段数要满足成一个上凸且相邻数差为$1$ 显然,删掉一段数后剩下的左右会相邻.. ...

  10. C++程序设计方法5:接口设计实例

    //例子:旋转方阵填充,要求矩阵大小任意,尺寸在运行时输入 设计思路:从上到下 int main() { cout << "Please input N:"; int ...