ionic 页面跳转动画
ionic基于angularjs,页面跳转有两种方式,$state.go('main'),或者ui-sref="main"
1.$state.go('main') 实现app跳转动画,方式之一 ,:
index.html页面:
<body><ion-nav-view></ion-nav-view></body>
页面上main.html页面:
页面主体:<ion-view id="category" view-title="商品分类" hide-back-button="true" cache-view="false" nav-direction="forward">
<ion-scroll>xxxxxxxxxxxxxx</ion-scroll>
<div ng-click="jumpToNextPage()">M</div>
</ion-view>
main.js中:
function jumpToNextPage(){
$state.go("nextPage");
}
这种以state.go跳转的页面,在ion-view标签上必须带上 nav-direction="forward"或者 nav-direction="back",来跳转。
2.ui-sref="main"方式动画跳转
页面上main.html页面:
页面主体<ion-view id="category" view-title="商品分类" hide-back-button="true" cache-view="false">
<ion-scroll>xxxxxxxxxxxxxx</ion-scroll>
<div ui-sref="nextPage"></div>
</ion-view>
main.js文件中不需要处理,ion-view上也不需要携带nav-direction
3.返回页面动画
$ionicHistory.goBack(); js中要注入$ionicHistory