Plunkr

Question

我有一个Ionic应用程序，我希望能够指定用户点击ui-sref点击时转换的方式。目前，如果我点击按钮Scientific Facts，则幻灯片转换到下一个视图将从右向左移动。我希望它能够从左到右。我有什么方法可以用Ionic做到这一点？

我的主页。

  <view title="'Home'">
    <content has-header="true" padding="true">
      <p>Example of Ionic tabs. Navigate to each tab, and
      navigate to child views of each tab and notice how
      each tab has its own navigation history.</p>
      <p>
        <!-- Link is here -->
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
      </p>

      <button class="button" ng-click="modal.show()">Open Modal</button>
    </content>
  </view>

事实页面

<view title="'Facts'">
    <content has-header="true" padding="true">
      <p>Banging your head against a wall uses 150 calories an hour.</p>
      <p>Dogs have four toes on their hind feet, and five on their front feet.</p>
      <p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
      <p>A cockroach will live nine days without it's head, before it starves to death.</p>
      <p>Polar bears are left handed.</p>
      <p>
        <a class="button icon ion-home" href="#/tab/home"> Home</a>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
      </p>
    </content>
  </view>

路线部分在这里。

.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.facts', {
    url: "/facts",
    views: {
      'home-tab': {
        templateUrl: "facts.html"
      }
    }
  })
})

我有一个codepen示例here。

Answer 1

navDirection指令允许您设置特定链接的导航方向。用法：

<a class="button icon icon-left ion-chevron-left" href="#/tab/facts" nav-direction="back">Scientific Facts</a>

确保您使用的是Ionic版本1.0 +。

单击时指定动画过渡

1 个答案:

Plunkr