Question

我真的希望一个离子忍者读到这个。 ;）

在Android Material Design (by specification)和iOS（根据UX设计趋势）中，选项卡式视图应该可以滑动并具有滑动过渡动画。

我从Starter“Tabs”创建了一个Ionic应用程序（最新版本）。

$ ionic start myApp tabs

为了给它一个更“原生”的外观和感觉，我通过向每个控制器添加滑动手势添加到每个选项卡：

.controller('TabOneCtrl', function($scope, $ionicTabsDelegate) {

    $scope.goForward = function () {
        var selected = $ionicTabsDelegate.selectedIndex();
        if (selected != -1) {
            $ionicTabsDelegate.select(selected + 1);
        }
    }

    $scope.goBack = function () {
        var selected = $ionicTabsDelegate.selectedIndex();
        if (selected != -1 && selected != 0) {
            $ionicTabsDelegate.select(selected - 1);
        }
    }

})

并将其添加到每个视图中：

<ion-content class="padding" on-swipe-right="goBack()" on-swipe-left="goForward()">

到目前为止，非常好 - 我可以在3个标签和他们的视图之间滑动，但它不会感觉“原生”（至少在Android上），因为视图只是弹出而不会滑动在... 所以我花了最后6小时谷歌在这里，在离子论坛，GitHub和其他地方 - 但不是清晰度，我只是更加困惑的小时。到目前为止，我已经挖出了以下矛盾的信息：

将animation="slide-left-right"添加到ion-nav-view
将animate='slide-left-right"添加到ion-nav-view
将class='slide-left-right"添加到ion-nav-view
动画指令已从

删除
动画指令应位于<a>标记
中
不要碰它。 Ionic将自己照顾它。

还有其他六个令人困惑和矛盾的信息 - 其中没有一个对我有用。（奇怪的是，nav-direction="back"标签中的<a>会在导航回来时生成正确的动画。）

来自Ionic“裂缝”的任何人都可以对这个问题有所启发，并阐明最佳实践是什么用于向Ionic应用添加页面/视图过渡动画。我想很多新手都会非常欣赏这一点（我自己也是如此）。

Ionic

0 个答案: