我的元素是这样组织的，我希望用户能够在列表中按特定顺序的 View 之间导航。默认的幻灯片转换考虑了用户的导航历史，这有时好有时坏。有没有一种方法可以简单地传递我希望 View 滑动的方式？
Here is a Codepen that demonstrates the issue I am having.
<!-- Codepens on StackOverflow require code to accompany the link. The link is much easier to follow, but here is the code just in case you cannot view the codepen or if the link is broken in the future. -->
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Example</title>
<link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js"></script>
<script type="text/javascript">
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.detailview', {
url: "/detailview/:index",
views: {
'home-tab': {
templateUrl: "detailview.html",
controller: 'DetailviewTabCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) {
$scope.details = [{id: 1},{id: 2},{id: 3},{id: 4},{id: 5}];
})
.controller('DetailviewTabCtrl', function($scope,$stateParams) {
$scope.id = parseInt($stateParams.index);
$scope.previous = parseInt($stateParams.index) - 1;
$scope.next = parseInt($stateParams.index) + 1;
});
</script>
</head>
<body>
<ion-nav-bar class="nav-title-slide-ios7 bar-stable">
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-stable">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content class="padding">
<p>Example of the navigation issue. If you go to item 1, then item 2, then back to item 1, the transitions look correct.<br/> However, if you start over and go to item 2, then item 3, then back to item 2, then to item 1, the transitions appear to slide in from the wrong direction.</p>
<p>
<ion-list>
<ion-item ng-repeat="detail in details" ng-href="#/tab/detailview/{{detail.id}}" class="item item-icon-right ">
Item {{detail.id}}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</p>
</ion-content>
</ion-view>
</script>
<script id="detailview.html" type="text/ng-template">
<ion-view title="Details on item {{id}}">
<ion-content class="padding">
<ion-nav-buttons side="right">
<a ng-href="#/tab/detailview/{{previous}}" class="button button-clear button-dark" ng-disabled="previous == 0"><i class="ion-chevron-left"></i></a>
<a ng-href="#/tab/detailview/{{next}}" class="button button-clear button-dark" ng-disabled="next == 6"><i class="ion-chevron-right"></i></a>
</ion-nav-buttons>
<h2>{{id}}</h2>
<p>Please use the navigation buttons on the top left of the screen.
</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
选择元素后，使用屏幕右上角的导航按钮来回导航。如果您从第一个元素开始，所有过渡都正常。我的意思是，当您按右时，新屏幕会从右侧滑入。但是，如果您从不同的元素开始，则屏幕滑入的方向会根据您的导航历史记录而有所不同。
我是否可以使用任何代码更改或属性来明确说明我希望屏幕以哪种方式显示？
最佳答案
您可以在导航按钮上使用 nav-direction="back" 和 nav-direction="forward"。 http://codepen.io/enbashi/pen/MYRNjy
关于javascript - 使用 Ionic Framework，如何提示过渡动画我希望 View 以何种方式滑入或滑出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25549714/