Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ion-nav-bar inside ion-nav-view to apply the animation also on the nav-bar #1232

Closed
dbaq opened this issue Apr 30, 2014 · 22 comments
Closed

ion-nav-bar inside ion-nav-view to apply the animation also on the nav-bar #1232

dbaq opened this issue Apr 30, 2014 · 22 comments

Comments

@dbaq
Copy link

dbaq commented Apr 30, 2014

Hi guys,

I was wondering if there is a way to include the ion-nav-bar inside the ion-nav-view, with that, developers will be able to apply the animation on the nav-bar also. We can see this kind of animations between transitions on several well known apps (twitter for android v.5.7.0, facebook messenger for android, etc..). The nav-bar is always included inside the transition, not only the content.

I made a codepen with my attempt to do it: http://codepen.io/anon/pen/ogJBa

And this one http://codepen.io/anon/pen/JGgIh to show how weird it could be if the nav-bar on a view is not displayed.

thanks for your answer 😄 🍻
@ajoslin
Copy link
Contributor

ajoslin commented Apr 30, 2014

Did you try adding an animation class to the navbar itself?

http://ionicframework.com/docs/api/directive/ionNavBar/ recommends 'nav-title-slide-ios7'

@dbaq
Copy link
Author

dbaq commented Apr 30, 2014

I thought the animation in the nav bar was only for the title and the buttons, not the bar itself. I have to try this. But I am not sure about the render of the animation because there is a scale notion.

It works if I am using a basic header instead of ion-nav-bar inside the ion-view, cf that codepen: http://codepen.io/anon/pen/zGDwC

@ajoslin
Copy link
Contributor

ajoslin commented Apr 30, 2014

I see what you mean ... you want to animate the whole navbar every view change?

@dbaq
Copy link
Author

dbaq commented Apr 30, 2014

basically, I want to animate the whole view (header, footer, content). The animation that I reproduced here (http://codepen.io/anon/pen/zGDwC for the demo) is used in a lot of apps. I know that my request looks like I am picky but I really think that is a must have if we want to have a native look n feel.

your current implement is very iOS centric (I just checked on my coworker's iPhone 5 - twitter app).

what do you think?

@ajoslin
Copy link
Contributor

ajoslin commented Apr 30, 2014

OK, added one thing to let you do this!

Now you can put an ion-nav-bar inside each individual ion-view:

<script id="view1.html" type="text/ng-template">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button>Back</ion-nav-back-button>
  </ion-nav-bar>
  <ion-view title="view1"></ion-view>
</script>

<script id="view2.html" type="text/ng-template">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button>Back</ion-nav-back-button>
  </ion-nav-bar>
  <ion-view title="view2"></ion-view>
</script>

Check the docs when the travis build finishes for a full explanation: http://ionicframework.com/docs/nightly/api/directive/ionNavBar

Note that you don't want an animation class on the navbar if you do this.

@ajoslin ajoslin reopened this Apr 30, 2014
@ajoslin
Copy link
Contributor

ajoslin commented Apr 30, 2014

Please test it out heavily in your app and let me know any problems; this addition is pretty experimental.

@dbaq
Copy link
Author

dbaq commented Apr 30, 2014

Thanks I will try this out by this weekend!

@dbaq
Copy link
Author

dbaq commented May 5, 2014

As far as I've tested, it is working well. Tested on my android device and on the iOS simulator. I don't have any iOS devices here to test.

@gastonbesada
Copy link

I tested in iOS 7.1 and the functionality it's working well except a withe vertical 1px line between views using <body ng-app="starter" animation="slide-left-right-ios7">

@ajoslin
Copy link
Contributor

ajoslin commented May 6, 2014

@gastonbesada do you have anymore information? Could you post a plnkr/codepen to reproduce this?

@ajoslin
Copy link
Contributor

ajoslin commented May 9, 2014

@gatonbesada bump :-) Any more informatino about this 1px line problem?

@gastonbesada
Copy link

@ajoslin Here is the cp: http://codepen.io/gastonbesada/pen/ctFdD

I rewrite the transition time to help to see it.

Thanks

@gastonbesada
Copy link

Oh @ajoslin , I saw, I had the nav-bar inside of nav-view. Now I moved it outside and when the nav-bar is blurred in/out, I see the pane background (white).

@ajoslin
Copy link
Contributor

ajoslin commented May 9, 2014

Your codepen will work if you take out the nav-title-slide-ios7 attribute. you don't need it anymore, since the parent page will be causing the navbar to animate.

@gastonbesada
Copy link

I removed nav-title-slide-ios7and now I see the 1px vertical line in the nav-bar.
http://codepen.io/gastonbesada/pen/ctFdD

@ajoslin
Copy link
Contributor

ajoslin commented May 14, 2014

Fixed by removing the border rule from the bar. Not sure why it's there - I'll make sure it's not useful and push if so.

@ajoslin
Copy link
Contributor

ajoslin commented May 14, 2014

Found the source, fixed.

@ooystein
Copy link

I'm having some problems with the ionNavBackButton when I put the ion-nav-bar inside each ion-view.

After some debugging it seems to me that when the ion-nav-bar is placed inside of each individual ion-view, the navigation history is not registered unless there is an ionNavBackButton in the ion-nav-bar. And therefore the back button is hidden until you visit your 2nd view containing a back button.

Here are two codepens to demonstrate:

  1. Here back-buttons are placed in each view: http://codepen.io/ooystein/pen/dlgGH
  2. In this example the back-button in the first view(Home) is removed, and it prevents the back button in the other views from showing up on the first visit: http://codepen.io/ooystein/pen/CLfFj

Is this a bug, or am I using it wrong?
The codepen example is probably not good at illustrating the need for this functionality since you probably don't want a back button on pages in the menu anyway. But it demonstrates the problem.

@kaililleby
Copy link

Im having the same problem as you @ooystein - did you find any solution?

@ooystein
Copy link

No. I reverted to using the navbar the standard way.

@getvega
Copy link

getvega commented Aug 7, 2014

Hi, seems like I still have the same issue as @ooystein in beta#1.0.0-beta.10 - first navigation no back button, second navigation back appears.

@hailiang-wang hailiang-wang mentioned this issue Nov 12, 2014
Closed
@ionitron-bot
Copy link

ionitron-bot bot commented Sep 6, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 6, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@getvega @ooystein @gastonbesada @kaililleby @ajoslin @dbaq