Feature Request: Make it possible to specify the animation used for a transition

[ch-weiss]

It would be helpful to be able to specify which animation is used for a transition. Here is an example use case of my app. I have a tab view listing the soccer matches of the next soccer world championship. So the list looks like this:

1. Match 1
2. Match 2
3. Match 3
4. Match 4
   ...

Each match list entry is linked to a detail page for that match. So the link structure is like this:

1. Match 1 -> Detail View Match 1
2. Match 2 -> Detail View Match 2
3. Match 3 -> Detail View Match 3
4. Match 4 -> Detail View Match 4
   ..

All pretty normal. To enable a faster navigation the detail views are working like a carousel (I can not use a carousel there because of performance issues, it would have to load all details of all matches at once). Thus it is possible to navigate from a match detail view directly to the detail view of the next match or to the detail view of the previous match without having to return to the list main view. So the link structure in the detail view for match 2 looks like this

Detail View Match 2 -> Detail View Match 1
Detail View Match 2 -> Detail View Match 3
Detail View Match 2 Back Button -> List View

The use case now is as follows:

1. The user chooes in the list match 2. -> The app changes to Detail View Match 2.
2. The user changes directly from Detail View Match 2 to Detail View Match 1.

Now it is necessary to tell Ionic to use a left to right transition because the user is logically going backwards in the list to the previous match. If Ionic uses the standard right to left transition this is irritating for the user in this situation. It is like a carousel using a right to left transition for going backwards.

I have the navigation working as described above apart from the transition direction. For the navigation I am using $location.path(url).replace();

[CoenWarmer]

I am now also in search for a way to set the direction of an animation when going to a specific state. Is there any progress on this?

[ajoslin]

I'm actively working on this feature.

[CoenWarmer]

Awesome, thanks so much @ajoslin! Any chance at all it might be ready in the next couple of days? I'm nearing the deadline for a project on Friday and it would be great to make use of this in this project.

[dbaq]

🍻 @ajoslin

[ajoslin]

Join the list here for more info soon: https://groups.google.com/forum/#!forum/ionic-vips

@CoenWarmer won't be ready by Friday, sorry.

[CoenWarmer]

@ajoslin No worries, I'll find another way. Thanks again!

[CoenWarmer]

Also just applied for a membership 👍

[ch-weiss]

Applied for membership as well.

[ch-weiss]

Sorry , my Android tablet has some problems with the page.

[ajoslin]

I stopped work on this feature this past week to instead focus on end-to-end testing of Ionic. Will resume work soon.

[ch-weiss]

👍

[JeanCarriere]

+1 :)

[perrygovier]

Note that #1506 was closed as a subset of this.

[peey]

It seems that this feature for specifying the animation transition was prematurely added to ionic code. Here's a snippet from ionic-angular.js version beta.1 :

    getRenderer: function(navViewElement, navViewAttrs, navViewScope) {
      var service = this;
      var registerData;
      var doAnimation;

      // climb up the DOM and see which animation classname to use, if any
      var animationClass = angular.isDefined(navViewScope.$nextAnimation) ?
        navViewScope.$nextAnimation :
        getParentAnimationClass(navViewElement[0]);

      navViewScope.$nextAnimation = undefined;

      function getParentAnimationClass(el) {
         ......more code.....

Notice, that the line var animationClass = ... first checks if a $scope.$nextAnimation is defined, and if it is then it uses that for animationClass, thus making it possible to control animations via code. But the line navViewScope.$nextAnimation = undefined; resets the scope's $nextAnimation variable to undefined, which means that you have to re-assign the value to $nextAnimation everytime after a transition, this is why a little while ago, I opened #1148.

For me, removing the line navViewScope.$nextAnimation = undefined; has made everything work.

It seems that this premature feature has been removed since, and after beta.1, the code above has been changed to

    getRenderer: function(navViewElement, navViewAttrs, navViewScope) {
      var service = this;
      var registerData;
      var doAnimation;

      // climb up the DOM and see which animation classname to use, if any
      var animationClass = getParentAnimationClass(navViewElement[0]);

      function getParentAnimationClass(el) {
        ...more code...

So those who want a quick fix to the problem and don't mind meddling with the source code (probably not recommended) may go ahead and change

      var animationClass = getParentAnimationClass(navViewElement[0]);

to

      var animationClass = angular.isDefined(navViewScope.$nextAnimation) ?
        navViewScope.$nextAnimation :
        getParentAnimationClass(navViewElement[0]);

and see if it works for them (is working fine for me).
And to the developers working on this (@ajoslin, I think), the fix to this issue might be easier than you were thinking!

[perrygovier]

As mentioned by @jbavari in ticket #1519, it would be helpful to be able to modify specific parts of existing animations as well.

[jbavari]

As noted first by user seanhill and instructed by mhartington on the ionic forums:

http://forum.ionicframework.com/t/side-menu-navicon-fade-in/4912

From his issue:
"On the sidemenu starter app, if you click one of the playlist's, the app slides left to show the playlist view, when you click back however, the back button slides away sexy, but on top of the navicon.

Is there a way that navicon button could potentially "fade in" after the back button has slide away?

Thanks"

[cggaurav]

@ajoslin Just curious, where does this stand? Is there a codepen for this?

[slegouffe]

Hi !
Any news about it ?

thks

[joeandrews]

+1

[bra1n]

+1

[ajoslin]

@adamdbradley is working hard on this

[alexbainbridge]

I coded this based on the thinking I explained in #714 . Its not as hard as it looks to get code to be able to infer the direction of animation.

Also I think pull request #2302 fixes this too, by the looks of the changes that is suggesting

[GBosman]

Got this in with a hacky workaround - you can just load css that overwrites the animation for the page where you want a different animation. Here I use the slide-left-right animation everywhere but slide bottom up for this page.

<ion-view>
    <link ng-href="css/styleSlide.css" rel="stylesheet" />
    ...
</ion-view>

styleSlide.css

.slide-left-right > .ng-enter, .slide-left-right.ng-enter, .slide-right-left.reverse > .ng-enter, .slide-right-left.reverse.ng-enter {
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0); }
.slide-left-right > .ng-leave.ng-leave-active, .slide-left-right.ng-leave.ng-leave-active, .slide-right-left.reverse > .ng-leave.ng-leave-active, .slide-right-left.reverse.ng-leave.ng-leave-active {
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0); }
.slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter, .slide-right-left > .ng-enter, .slide-right-left.ng-enter {
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0); }
.slide-left-right.reverse > .ng-leave.ng-leave-active, .slide-left-right.reverse.ng-leave.ng-leave-active, .slide-right-left > .ng-leave.ng-leave-active, .slide-right-left.ng-leave.ng-leave-active {
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0); }

[FMCorz]

Any update on this? I would also like to use this feature when defining my own gestures to navigate between $states. Has someone found another workaround than overriding the CSS?

[StreetStrider]

I'd faced this issue one time and our team had to solve it like @GregoryBosman did. It is sad to watch how frameworks thinks they know dev' projects better then devs and know which animation devs need.

[adamdbradley]

Beta14 transitions is being overhauled, and we'll be releasing an animations pack soon.

[srameshr]

adambradley! Awesome to hear that, When might that be?

[evanmrose]

Also interested in the navigation pack. Any updates on this?

[clickonchris]

+1

[kayzee]

+1 as well. I have an

A -> B1 -> B2 -> B3 -- $state.go("A") --> A

The transition back to A is right to left. I know it is impossible to guess the correct animation, which is why it would be fantastic to allow something like:

$ionicHistory.nextViewOptions({
    animationRightToLeft: false
});

[kayzee]

I just found the nav-direction directive, but it doesn't appear to be working for me.

<ion-nav-bar>
    <ion-nav-buttons>
      <div class="buttons">
        <button class="button button-icon icon ion-ios-arrow-back" ng-click="goHome()" nav-direction="back"></button>
      </div>
    </ion-nav-buttons>
</ion-nav-bar>

[bonatoc]

For me neither. Ionic still deserves a clearer way, or a good example on how to set/hack page transitions the proper/official way.

[Fayozjon]

Christian

http://www.baltdivision.ru/otzyvy

23.03.2015, 14:02, "Christian Bonato" [email protected]:Me neither. Ionic still deserves a clearer way, or a good example on how to set/hack page transitions the proper/official way.

—Reply to this email directly or .

[Fayozjon]

Kevin

http://scaer.ru/bankter

19.03.2015, 23:02, "Kevin Zych" [email protected]:I just found the nav-direction directive, but it doesn't appear to be working for me.

—Reply to this email directly or .

[ChristiaanScheermeijer]

Why is nobody mentioning the $ionicViewSwitcher? Or shouldn't this be used?

$ionicViewSwitcher.nextDirection('back');
$state.go('login');

[kayzee]

Thank you @ChristiaanScheermeijer!!! This works perfectly! Where is it documented?

[ChristiaanScheermeijer]

It's not documented that's why I'm not sure if this is supposed to be used. But at least it works :)
Example with $state decorator:

$provide.decorator('$state', function($delegate) {
      var original = $delegate.go;

      $delegate.go = function (to, params, options, direction) {
        if (direction) {
          $ionicViewSwitcher.nextDirection(direction);
        }

        return original.call(this, to, params, options);
      };

      return $delegate;
    });

[svx3]

AH! it's been driving me crazy for weeks, and I finally figured out animations in ionic after digging through the code.. here's what I've learned, hopefully it'll help someone else out there:
There's actually quite a few ways to set the animations for ion-view when using ion-nav-view. According to ionic-angular.js, function getTransitionData():
// Priority
// 1) attribute directive on the button/link to this view
// 2) entering element's attribute
// 3) entering view's $state config property
// 4) view registration data
// 5) global config
// 6) fallback value

for item #1: you can simply set the next-transition attribute on any button or link. This also means you can set $ionicViewSwitcher.nextTransition('transitionName') in your javascript before performing any type of view change. Keep in mind that this transition will not be relevant when you go backwards!

#2:You can simply set the view-transition attribute on the highest level element for the incoming view (generally ion-view). Will apply when the view is leaving and coming;

#3: As part of the configuration in your app.js, or as part of your controller setup, you can set the viewTransition property on the $state object. Will apply when the view is leaving and coming;

#4: not sure what this is about, seems to be an outdated comment

#5: Sets the transition across the application, set this as part of the config. I believe for this one you'll need to set the $ionicConfigProvider.views.transition function to handle your transition.

In general, when you're setting the transtions, there are three options, ios (default), android, and none. If you want to define your own, it's not very hard.

The format is something along the lines of this (copied from the ios transition, replace instances of ios with your transition name):

.config(function ($ionicConfigProvider) {
$ionicConfigProvider.transitions.views.ios= function (enteringEle, leavingEle, direction, shouldAnimate) {
alert('testing my animation");

        function setStyles(ele, opacity, x, boxShadowOpacity) {
            var css = {};
            css[ionic.CSS.TRANSITION_DURATION] = d.shouldAnimate ? '' : 0;
            css.opacity = opacity;
            if (boxShadowOpacity > -1) {
                css.boxShadow = '0 0 10px rgba(0,0,0,' + (d.shouldAnimate ? boxShadowOpacity * 0.45 : 0.3) + ')';
            }
            css[ionic.CSS.TRANSFORM] = 'translate3d(' + x + '%,0,0)';
            ionic.DomUtil.cachedStyles(ele, css);
        }

        var d = {
            run: function (step) {
                if (direction == 'forward') {
                    setStyles(enteringEle, 1, (1 - step) * 99, 1 - step); // starting at 98% prevents a flicker
                    setStyles(leavingEle, (1 - 0.1 * step), step * -33, -1);

                } else if (direction == 'back') {
                    setStyles(enteringEle, (1 - 0.1 * (1 - step)), (1 - step) * -33, -1);
                    setStyles(leavingEle, 1, step * 100, 1 - step);

                } else {
                    // swap, enter, exit
                    setStyles(enteringEle, 1, 0, -1);
                    setStyles(leavingEle, 0, 0, -1);
                }
            },
            shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
        };

        return d;
    };
});

followed by the css:

// iOS View Transitions
// -------------------------------

$ios-transition-duration: 500ms !default;
$ios-transition-timing-function: cubic-bezier(.36, .66, .04, 1) !default;
$ios-transition-container-bg-color: #000 !default;

[nav-view-transition="ios"] {

[nav-view="entering"],
[nav-view="leaving"] {
@include transition-duration( $ios-transition-duration );
@include transition-timing-function( $ios-transition-timing-function );
-webkit-transition-property: opacity, -webkit-transform, box-shadow;
transition-property: opacity, transform, box-shadow;
}

&[nav-view-direction="forward"],
&[nav-view-direction="back"] {
background-color: $ios-transition-container-bg-color;
}

[nav-view="active"],
&[nav-view-direction="forward"] [nav-view="entering"],
&[nav-view-direction="back"] [nav-view="leaving"] {
z-index: $z-index-view-above;
}

&[nav-view-direction="back"] [nav-view="entering"],
&[nav-view-direction="forward"] [nav-view="leaving"] {
z-index: $z-index-view-below;
}

}

[yesir1006]

Any exciting update on this? I am newbie on ionic, where can I find all the animation definition in ionic, like slide-left-right?

[alaa-alshamy]

what happened on this issue?

[boshmaf]

+1

[mhartington]

This was added in beta 14.

http://ionicframework.com/docs/api/directive/navTransition/
http://ionicframework.com/docs/api/directive/navDirection/

[boshmaf]

Yes. Thanks.

I used this, and it works great.

$ionicViewSwitcher.nextDirection('back');
$state.go('login');

[dinesh36]

@boshmaf Great !!!!