[FEATURE] Swipe-To-Go-Back, iOS7-Style / Interactive View Transitions

[sidneys]

The new iOS7 navigation paradigm requires that users can always swipe to navigate backwards - in UIKit, this feature is called "Interactive Transitions".

This has been excellently implemented in - only a few days old - "Framework 7" by the iDangerous guys:

Demo (Swipe from the left Screen Border): http://www.idangero.us/framework7/#.UxRzo_RdXQw

Source: https://github.com/nolimits4web/Framework7/blob/master/src/js/views.js

This would be the last gap to close to make Ionic non distinguishable from native on newer iOS7 based devices. :-) Please integrate it to the the Ionic framework.

[uniring]

/agree

[ajoslin]

Opened #721 to do first

[CoenWarmer]

All for this!

[cutzenfriend]

+1

[kamote]

+1

[antonshevchenko]

+1

[ajoslin]

Coming soon ... :tm:

[ianlyons]

+1... is it really coming soon? this would be huge. all our testing shows users immediately trying to swipe first to get back to the main screen from side menus.

[ajoslin]

We're working on it right now - it requires a refactor of the whole nav system.

[rajatrocks]

+1

[ctaepper]

+1

[EmreMengukan]

hi What is the latest situation :)

[perrygovier]

Moving feature requests from GH Issues to Trello. Please continue the discussion and vote for this and other issues that are important to you here: https://trello.com/c/DFBLfHRz/16-swipe-to-go-back-ios7-style-interactive-view-transitions

[nodkrot]

+1

[hanford]

+1

[jrutter]

+1

[alexbainbridge]

This can be coded with existing framework functionality

a) On ion-content - add something like on-swipe-right="swipe('plan', 'left')
That includes the direction AND the state I want to go to On some I have on-swipe-left as well.... depending upon what effect I want.....

<ion-content on-swipe-right="swipe('plan', 'left')">

b) In a controller somewhere

    $scope.swipe = function (new_location, direction) {

        if (direction == "right")
        {
           $scope.primary_view_animation_class = "ABC_slide-full";   // slide-in-right
        }
        else
        {
            $scope.primary_view_animation_class = "ABC_slide-full_left";  // slide-in-left
        }

        $location.path(new_location);
    }

(ABC being a namespace of your choice, but use one so it doesn't clash with the existing CSS)

c) We need to apply some CSS to the ion-nav-view....... however I could't get the ion-nav-view to take the transition CSS, so had to wrap it in a div (in my index.html file)

<div animation="{{primary_view_animation_class}}">
    <ion-nav-view>
    </ion-nav-view>
</div>

d) Copy the CSS for slide full - and use the .reverse version for the _left version (as the framework is trying to add the class reverse, but because history is all a bit contradictory to the user proposed swipe, we can't rely on that to ensure that when we are swiping left, the content scrolls the way the swipe is, so we have to use our own CSS here to avoid weirdness

(Don't forget your namespace you chose in A !)

Yes a bit of work - but hey - its possible :)

[ardavank]

I like the @alexbainbridge idea but its just easier if we use the $ionicNavBarDelegate.back(); method. Therefore, we don't need to be worry about the animations anymore. Something like this would work:

<ion-content on-swipe-right="swipe('right')">

.controller('myController', function($scope, $ionicNavBarDelegate)
 {
    $scope.swipe = function (direction) 
   {
        console.warn('Swipe:  ' + direction);
        $ionicNavBarDelegate.back();
    }
}

[bentomas]

The on-swipe-right code from @alexbainbridge doesn't do the right thing. This should only be triggered if the swipe is from the left edge of the screen. And the content needs to drag with the swipe. This can't be achieved easily currently and should be built-in to Ionic, as it needs to be done perfectly for apps to fit in on iOS.

[bonesmccoy]

Since I have a view that has always a back state, I solved in this way

<ion-view view-title="Title " id="ElementId"></ion-view>

.controller("ElementController", ['$ionicHistory', '$ionicGesture', 
    function($ionicHistory, $ionicGesture) {

         $ionicGesture.on('dragright',function(event) {
                   $ionicHistory.goBack();
            }, angular.element(document.querySelector("#ElementId")));
}])

[RomanMinkin]

Hi guys any updates? ;)

[reviyou]

new release candidate(just saw and tried it 5 hours ago!) seems to provide this feature out of the box

[danicomas]

This feature not works in Android 4.4.4 Nexus 4 with version v1.0.0-rc.4 "sulfur-suricate".

[perrygovier]

Swipe to go back is only enabled on iOS. It's not as common of a feature on Android and some lower quality Android devices just couldn't handle it. We opted to keep the functionality consistent across all devices on a given platform and disabled it for all Android. Plus, the Android style page transition doesn't look as good when gradually swiped.

[onchainguy-btc]

Does this feature only contain swiping back? What about swiping forward?

[danicomas]

Hi @perrygovier @ajoslin I need to do something like that but in Android not works how can I do it? Thanks

[danicomas]

@perrygovier I have tried this but it doesn't work in Android 4.4.4:

$ionicGesture.on('swipe',function(event) { alert(1); }, angular.element(document.querySelector("#hhh")));

[danicomas]

It works on Android 5.X @perrygovier

[Yonn-Trimoreau]

@seb0zz +1 ! Have you found a way implementing this ?

[onchainguy-btc]

@Yonn-Trimoreau unfortunately I didn't :-(

[Yonn-Trimoreau]

Just found it. It's not really looking like if it was native, but it works great ;) ---> on-swipe-left directive

[mhartington]

This feature has been in ionic for a few releases now. It's enabled when using Cordova and iOS. It's disabled for android since android does not have the feature.

[Yonn-Trimoreau]

It works quite beautifully when swiping from an ion-slide :+1:

[magleahy]

Is there any event listener available for swipe back? I am trying to hook into this using drag right or swipe right but as they are not the same event - it's not accurate. Thanks in advance.