Animation slide left right not all pages

ionic-v1
1

hey there,

is there a possibility to deactivate somehow the animation effects on some pages? my problem is that when i open a side menu and i click there a link where i have a location change it is somehow an animation as i close the side menu and the new page is loaded and shown. but if i have a link inside a page (not in the side menu) then i want to have the nice animation slide left right.
anyone fighting with the same issue?

many thanks,
michael

2

ion-nav-view can accept an animation="none" and disable animation on all views rendered in it. If you want to have views that do not animate, you should think about your states and how your app is structured.

For a project I’m working on, my main nav-view in my index.html animates but I have some sub nav-views that have no animation.

<ion-nav-view animation="slide-left-right">
   <ion-view></ion-view>
   <ion-view>
      <ion-nav-view animation="none">
         <ion-view></ion-view>
      </ion-nav-view>
   </ion-view>
</ion-nav-view>

This is just to illustrate the point I’m trying to make about how to structure things. Does this make sense?

1 Like
3

well… i think i don’t get it. :wink: how does the routing knows in which of the ion-views the content should be loaded? and what do you mean by “states”? the structure i have i very simple. i have a menu positioned in the side menu controller. well… from there i can jump for example to a settings page. in this case i don’t want to have a animation as the side menu toggles back and the settings page is open. makes sense or? but when i am on my main page (a huge list is included) which shows up the overview of the contents the user can watch and he/she clicks on a item there should be a animation. so what i now don’t understand is the way i should handle this in states? how can i decide where to load the content to?

does this makes sense what i am trying to say?

thx,
michael

4

States are the main focus of UI-router and describe different places in your app. Heres a video by the Angular-UI guys about it, helped me out a lot.

That makes sense, it basically is how I have my project set up as well.

I put this together to better explain what I mean by thinking about your structure. So I have the main ion-nav-view with the animation on so I can go from one page (with out side menu) to another (with side menu).

Then from the side menu, I have another nav-view without animation so I can go to the other pages from the side menu (which will render in the non-animated nav-view).

The way you scaffold out your app and set up your states/views is going to be important here. Hope this helps

5

mmmh i have to check it out. but the code pen example is similar to what i want. i have to check that out in dept. thank you very much. if i have any more questions i will post it up here. but that helped me a lot.

thx,
michael

1 Like
6

hey,
i have a short question. my views don’t get loaded. so i have a “ion-nab-view” with name=“XXX” but this is not getting loaded in there. it is correct declared in the stateProvider and it is mentioned in the specific template. what can it be?

thx,
micahel

7

Do you mind posting a codepen?

8

here is a code pen which is not working :frowning: nothing is loading the the ion-nav-view. i don’t know why

9

It had to do with your $urlRouterProvider, you have yours as:

$urlRouterProvider.otherwise("/sectors");

This will load everything but since it’s defined as an abstract state, it won’t load any content. What you want is this:

$urlRouterProvider.otherwise("/sectors/home");

Check out the codepen link above to see it working.

10

it works now. thx. although i don’t get it why? i have to check more in detail the ui-router. looks from the beginning on a bit confusing.

11

Definitely read up on the UI-router a bit, there’s a lot too it so give it some time to sink in (I’m still learning new things here and there).

The best way I can describe it is that if you describe a view as abstract, it doesn’t have any content to, initially. The whole point of an abstracted state is so you can load more content into it and then specify a url to that nested state. So /main will display even if it is an abstract state but if there’s no content, what is it going to show?

It is a confusing concept but whats you get it, it will make life a lot easier! Best of luck to you.

1 Like
12

hey,

i think i got the main idea. :slight_smile: although i have one big question. here is a example code:

angular.module('climb', ['ionic', 'climb.controllers', 'climb.services'])

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
  .state('menu', {
    url: "/menu",      
    templateUrl: "templates/menu.html",
    controller: 'MainCtrl'
  })

  .state('menu.sectorList', {
    url: "/sectorList",
    parent:"menu",
    views:{
      'menuContent':{
        templateUrl: "templates/sectors.html",
        controller: 'SectorCtrl'
      }
    }
  })
  .state('sectorList.detail', {
    url: "/:si_id",
    templateUrl: "templates/details.html",
    controller: "DetailsCtrl"
  })
  .state('menu.settings', {
    url: "/settings",
    parent:"menu",
    views:{
      'menuContent':{
        templateUrl: "templates/settings.html",
        controller: 'SettingsCtrl'
      }
    }
  })

  // if none of the above are matched, go to this one
  $urlRouterProvider.otherwise("/menu/sectorList");

})

how do i perform the sectorList.detail to open? i have my sectorList which is perfectly fine loaded as well as the settings but if i click on a list item nothing happens. what i want to have is to load the details for this item. the url is changing but the templates does not get loaded. do you know why? i am getting crazy. :frowning:

many thanks in advance

13

The best way to learn how to do that is to take a look at the starter seed project that Ionic provides. The project shows this item/detail view template and how you would pass detail based from an item to a new page.