Howto: Animate page-transitions and keep views in DOM

I have a pretty simple requirement for tabbed navigation (a couple of tabs at the bottom and a couple of pages/views):

  • If I click/tap a tab, there should be a transition to the next view.
  • Views/Pages should not get removed from the DOM (because they should keep their scroll-positions, etc…)
  • tab-links should be set to active

I tried some variations, but somehow I either loose animation or pages are removed from DOM:

Below are some variations I tried without success. The variations are wrapped into a views div, like so:

 <f7-views tabs id="main-view" url="/" main>
    <---variations here--->
</f7-views>

Variation 1:
Here, views are shown correctly, tab-links are automatically set to ‘active’ and animation is correct, but views get re-created every time:

  <f7-toolbar tabbar labels>
    <f7-link tab-link tab-link-active route-tab-id="#view-home" href="/" :animate="true" text="Home"></f7-link>
    <!--...-->
    <f7-link tab-link route-tab-id="#view-settings" href="/settings/" :animate="true" text="Settings"></f7-link>
  </f7-toolbar>

  <f7-view id="view-home" name="home" main tab tab-active url="/"></f7-view>

Variation 2:
Basically, same as V1, but using stackPages: Now pages are stacked, but re-created every time they get shown (so I have plenty of duplicate pages in the DOM (and scroll-positions are not retained):

   <f7-toolbar tabbar labels>
      <f7-link tab-link tab-link-active route-tab-id="home" href="/" animate text="Home"></f7-link>
      <!--...-->
      <f7-link tab-link tab-link-active route-tab-id="view-settings" href="/settings/" animate text="Settings"></f7-link>
    </f7-toolbar>

    <f7-view id="view-home" stackPages="true" name="home" main tab tab-active url="/" data-animate="true"></f7-view>

Variation 3:
This way, everything works fine and elements are kept in DOM, but there’s no page-transition:

    <f7-toolbar tabbar labels>
      <f7-link tab-link tab-link-active href="#view-home" :animate="true" text="Home"></f7-link>
      <!--...-->
      <f7-link tab-link tab-link-active href="#view-settings" :animate="true" text="Settings"></f7-link>
    </f7-toolbar>

    <f7-view id="view-home" name="home" main tab tab-active url="/" :animate="true" </f7-view>
    <!--...-->
    <f7-view id="view-settings" name="settings" tab url="/settings/" :animate="true"></f7-view>

I am pretty sure I’m doing something wrong here…

Sorry for a lengthy question, but this is hard to put into a jsfiddle…

Any hint?

@nolimits4web Do you have any hint what’s wrong here?

Sorry i didn’t really get what you are trying to achieve.
If you use Views as Tabs then animation between them possible with setting animated tabs on them.

Not sure how to explain better… so maybe:

Just use:

  • f7 create --ui
  • choose Tabbed Views (Tabs)
  • after project is created: npm start

Question:
-> How can I add a transition (which updates the bottom-bar icons) when clicking/tapping a tab?

I guess you mean how to make Views-Tabs as animated tabs?

<div id="app">
  <!-- ... -->
  <div class="views tabs-animated-wrap safe-areas">
    <div class="toolbar toolbar-bottom tabbar-labels">
      ...
    </div>
    <div class="tabs">
      <div id="view-home" class="view view-main view-init tab tab-active">...</div>

      <div id="view-catalog" class="view view-init tab" data-view="catalog">...</div>

      <div id="view-settings" class="view view-init tab" data-view="settings">...</div>
    </div>
  </div>
  <!-- ... -->
</div>
2 Likes

Jep - thanks… I missed the tabs-animated-wrap somehow…
Now it works as desired!

thx!!