用angular ui router写的一个小效果。里面的animation没有效果。我不知道是我用的版本的原因还是其他原因。
html页面如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/ionic.css">
<!-- <link href="//cdn.bootcss.com/ionic/1.3.1/css/ionic.css" rel="stylesheet">-->
</head>
<body ng-app="wechat">
<ion-nav-view ></ion-nav-view>
<script src="js/ionic.bundle.js"></script>
<script>
angular.module('wechat',['ionic','ui.router'])
.controller('one',function($scope){})
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/tab/m");
$stateProvider
.state("tab",{url:"/tab",templateUrl:"view/tab.html", controller : "one"})
.state("tab.m",{
url:"/m",
views:{
"tab-m":{
templateUrl:"view/childPage1.html"
}
}
})
.state("tab.t",{
url:"/t",
views:{
"tab-t":{
templateUrl:"view/childPage2.html"
}
}
})
.state("tab.f",{
url:"/f",
views:{
"tab-f":{
templateUrl:"view/childPage3.html"
}
}
})
.state("tab.i",{
url:"/i",
views:{
"tab-i":{
templateUrl:"view/childPage4.html"
}
}
})
})
</script>
</body>
</html>
tab页面内容如下
<ion-tabs ng-controller="one" class="tabs-stable tabs-icon-top">
<ion-tab ui-sref="tab.m" title="信息" icon-on="ion-ios-chatbubble" icon-off="ion-ios-chatbubble-outline">
<ion-nav-view animation="slide-left-right" name="tab-m"></ion-nav-view>
</ion-tab>
<ion-tab ui-sref="tab.t" title="通讯录" icon-on="ion-ios-list" icon-off="ion-ios-list-outline">
<ion-nav-view animation="slide-left-right" name="tab-t"></ion-nav-view>
</ion-tab>
<ion-tab ui-sref="tab.f" title="发现" icon-on="ion-ios-eye" icon-off="ion-ios-eye-outline">
<ion-nav-view animation="slide-left-right" name="tab-f"></ion-nav-view>
</ion-tab>
<ion-tab ui-sref="tab.i" title="我" icon-on="ion-ios-pulse-strong" icon-off="ion-ios-pulse">
<ion-nav-view animation="slide-left-right" name="tab-i"></ion-nav-view>
</ion-tab>
</ion-tabs>路由效果是实现了。但是没有animation动画。
跳的四个页面内容均为
<div style="width: 100%;height: 100%; background-color: #0c60ee">11111111111</div>这是boundle里面的版本内容
/*!
* ionic.bundle.js is a concatenation of:
* ionic.js, angular.js, angular-animate.js,
* angular-sanitize.js, angular-ui-router.js,
* and ionic-angular.js
*/
/*!
* Copyright 2015 Drifty Co.
* http://drifty.com/
*
* Ionic, v1.3.0
* A powerful HTML5 mobile app framework.
* http://ionicframework.com/
*
* By @maxlynch, @benjsperry, @adamdbradley <3
*
* Licensed under the MIT license. Please see LICENSE for more information.
*
*/
ionic css版本如下
/*!
* Copyright 2015 Drifty Co.
* http://drifty.com/
*
* Ionic, v1.3.0
* A powerful HTML5 mobile app framework.
* http://ionicframework.com/
*
* By @maxlynch, @benjsperry, @adamdbradley <3
*
* Licensed under the MIT license. Please see LICENSE for more information.
*
*/
/*!
Ionicons, v2.0.1
Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
https://twitter.com/benjsperry https://twitter.com/ionicframework
MIT License: https://github.com/driftyco/ionicons
Android-style icons originally built by Google’s
Material Design Icons: https://github.com/google/material-design-icons
used under CC BY http://creativecommons.org/licenses/by/4.0/
Modified icons to fit ionicon’s grid from original.
*/--不知道哪里出的问题。动画出不来。切换页面没有动画
tab标签是没有动画的。并且，ion-nav-view没有animation属性。
因为每个tab是对应一个ion-nav-view的，所以多个ion-nav-view切换时没有动画效果的。就像你在微信里，切换“通讯录”和“发现”按钮时，是一样的。
如果你对单个ion-nav-view中设置子页面，在进入这个子页面时是有动画效果的，再比如微信：在“发现”页面，点击“朋友圈”进入是有动画效果的。
加个实例代码：
路由设置：
$stateProvider
.state("tab",{url:"/tab",templateUrl:"view/tab.html", controller : "one"})
.state("tab.m",{
url:"/m",
views:{
"tab-m":{
templateUrl:"view/childPage1.html"
}
}
}).state("tab.m.a",{
url:"/m/a",
views:{
"tab-m":{
templateUrl:"view/a.html"
}
}
});然后在 childPage1.html 里加个按钮，设置它的跳转路由地址是：ui-sref='tab.m.a'。
在点击按钮的时候，你就能看到动画了。
希望你能帮到你。