Howto: Animate page-transitions and keep views in DOM

Questions
1

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?

2

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

3

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.

4

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?

5

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>
3 Likes
6

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

thx!!