benharpers
commented
7 years ago One problem with the attribute directive method is that you would have to add it to every ion-header in the whole app, which wouldn't be hard but it's not ideal. On the plus side, you could add it to any element you wanted this fade effect on.
Another method would be to only slide the ion-content block instead of the whole nav page and have everything else at the top level of the page's dom, like ion-header and ion-footer or anything else, do an opacity transition. I know you currently use a div that is super wide to hold all the pages so it would require some re-working of that.
Ionic already does this effect pretty well with the back swipe from one page to another, perhaps that should be how it works for tabs too.
ihadeed
kodeine
damonsomu
This may be fairly difficult to do this, but it might make sense in some apps to have the header bar stay in-place and fade its content as the tabs are swiping. Similar to a back-swipe (on iOS anyway). For example, if you have your apps logo in the middle of the header on all pages and you just want the icons in the header to change from one tab to another, it looks a little raw to have the header moving. Right now it kind of looks like one long bar across all the tabs.
One way to handle it could be with an attribute directive. You could add a certain attribute to any element you want to "stay in-place and fade" instead of sliding. That element would then get an opacity matching the current % of swipe and a negative/positive CSS transform/translateX to move it in the opposite direction of the slide so it appears to not be moving.