在Ionic Framework中,您可以设置选项卡.选项卡中的页面可以使用“向左滑动”或其他类型的过渡轻松转换.这使应用程序感觉流畅和深思熟虑.
我遇到的问题是,从标签菜单中点击后,与每个标签相关联的页面根本不会过渡,只有“繁荣”：页面.
我在codepen (link to codepen demo)上发现了一支可以按照我的需要复制这种效果的笔(在某种程度上),但我不能在任何情况下复制它,更不用说Ionic rc0(1.0)版本了.
codepen代码使用似乎在其他地方不起作用的动画：
< ion-nav-view animation =“slide-left-right”>< / ion-nav-view>
请协助.
最佳答案
我没有尝试让这个确切的示例正常工作,但我在我的一个应用程序中通过为所有选项卡提供相同的视图名称来实现类似的效果：
app.js
$stateProvider
.state('signin',{
url: "/sign-in",templateUrl: "sign-in.html",controller: 'SignInCtrl'
})
.state('forgotpassword',{
url: "/forgot-password",templateUrl: "forgot-password.html"
})
.state('tabs',{
url: "/tab",abstract: true,templateUrl: "tabs.html"
})
.state('tabs.home',{
url: "/home",views: {
'tab-view': {
templateUrl: "home.html",controller: 'HoMetabCtrl'
}
}
})
.state('tabs.facts',{
url: "/facts",views: {
'tab-view': {
templateUrl: "facts.html"
}
}
})
.state('tabs.facts2',{
url: "/facts2",views: {
'tab-view': {
templateUrl: "facts2.html"
}
}
})
.state('tabs.about',{
url: "/about",views: {
'tab-view': {
templateUrl: "about.html"
}
}
})
tabs.html