Animations?

ionic-v1
1

Hello,

I am still a beginner and trying to add animations when switching between tabs.

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

but doesn’t seem to have any effect? Is this an issue? Or more possibly I am doing something wrong?

2

It depends how your states are defined and if you have other ion-nav-view’s where it is set to “no-animation”

3

My states are defined as follows:

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

//First page
.state('login', {
  url: '/login',
  templateUrl: 'templates/login.html',
  controller: 'LoginCtrl'
})

// setup an abstract state for the tabs directive
.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'templates/tabs.html'
})

// Each tab has its own nav history stack:
.state('tab.home', {
  url: '/home',
  views: {
    'tab-home': {
      templateUrl: 'templates/tab-home.html',
      controller: 'HomeCtrl'
    }
  }
})

.state('tab.profile', {
  url: '/profile',
  views: {
    'tab-profile': {
      templateUrl: 'templates/tab-profile.html',
      controller: 'ProfileCtrl'
    }
  }
})

In each of the templates I encapsulate everything in and that is all, I do not use “no-animation”

4

Could you remove animation=“slide-left-right” from your ion-nav-view?
Then the default animation should be used.

Ähm but you should have another ion-nav-view in your templates/tabs.html!
may you post this page-content?

5

Removed what you said and also you were right, this is my tabs.html:

<ion-tabs class="tabs-icon-top">

<!-- Home Tab -->
<ion-tab title="Home" icon="icon ion-home" href="#/tab/dash">
  <ion-nav-view name="tab-home"></ion-nav-view>
</ion-tab>

<!-- Profile Tab -->
<ion-tab title="Profile" icon="icon ion-person" href="#/tab/profile">
  <ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>

</ion-tabs>
6

And why you expect animations between the two tabs?

You have only an animation if you change the ion-nav-view content.
you have two ion-nav-view-tags -> on in one state you show the home-tab and in the other the profiletab -> na transition -> no animation.

7

I understand now, thanks :slight_smile: So I would have to change the way tabs are done I guess, including the routing

8

Should I be dropping the abstract tab in order to achieve animations?

I am looking at:

and he seems to have the same thing I’ve got, I am a bit lost.

9

Ähm the thing is, tabs are tabs and different (seperated) views/states are another thing… you are usind “tabs” correctly.

Tabs are there to handle multiple content on one page (without a page transition, because if you change a tab you only show content and hide the other one - on the same page).

Maybe you want something like a buttonbar and on a click on a button you change the state and the content of the same ion-view.

10

Thanks for all the help! I wish I could return the favour :stuck_out_tongue:

11

no probs… thats how “learning” - works… asking questions and understand the answers.

If you get asked those question in the future… you can response (… if you fast enough!)

greetz :wink:

2 Likes
12

Hi csoare,

I’m trying to implement the tab transitions with Ionic 1.2.1 (latest). Did you manage to implement it correctly? Thanks!

13

Hi there,

I did yes, but this was over a year ago and with a different version of Ionic. What issues are you facing?

14

Hi csoare,

I am unable to animate the page on tab change. Wanted to find out how you implemented your solution.

After reading this thread, I tried to redo the structure of my routing, but still unable to implement the page transition properly.

How did you solve your issue with regards to the routing, tabs and ion-nav-view?

Thanks!

15

I did this :smile: Sorry I can’t post any code since I no longer have access to it.

16

Ah okay. No problem. So you didn’t manage to create page transition via click of Tabs?

17

Well, he is probably ‘expecting’ it because it’s integral part of Material Design as specified by Google here (scroll down to see the videos) - and it’s also creeping into iOS. [I only have an iPhone4 with iOS7 here, but I just checked. Facebook and Twitter does not have it. But Tinder has it very clearly and the transition between apps (tab on ‘chat’ in the FB app and see how the FB Messanger ‘slides’ in.) is also clearly sliding in from the left…]

So clearly sliding transitions is a part of “native” look&feel - It’s pretty frustrating to try to find out if it is actually possible and how. I just spent the last 4 hrs googling and reading. So far I found here, on Stackoverflow, Github and elsewhere:

  • add animation="slide-left-right" to ion-nav-view
  • add animate='slide-left-right" to ion-nav-view
  • add class='slide-left-right" to ion-nav-view
  • the animation directive has been removed from Ionic
  • the animation directive should be in the <a> tag

(and half a dozen other confusing and contradicting information)

Now I am trying to wrap my head around your answer here - So what’s the difference between a “button” bar and a “tab” bar (see your other answer below) and what is the best practice to do this animations?

Could you elaborate a little more on this? Would be really very very much appreciated (I know your answer have been 1.5 yrs ago, but you are Mod here, so I hope you hang around)

Thanks

PS: What is “Ähm”? :wink: