Toolbar/Tabbar animation option needed

[stanleyxu2005]

I'm using Framework7 v7.1.5 Codesandbox

Is your feature request related to a problem? Please describe. I'm designing a tabbed app. By entering a new page, if f7-page contains attribute no-toolbar, the tabbar will be hide automatically. But it is alway with animation.

Describe the solution you'd like I'd like to have an option to determine, whether show/hide toolbar/tabbar should with animation.

Here it the current implementation in toolbar.js

    pageBeforeIn(page) {
     ...

      if (page.$el.hasClass('no-toolbar')) {
        app.toolbar.hide($toolbarEl);  // <-- second argument animate is not specified, means true
      } else {
        app.toolbar.show($toolbarEl);  // <-- second argument animate is not specified, means true
      }
    },

toolbar.d.ts

  interface AppParams {
    toolbar?:
      | {
          /** Will hide Toolbars/Tabbars on page scroll (default false) */
          hideOnPageScroll?: boolean;
          /** Set to true to show hidden Toolbar/Tabbar when scrolling reaches end of the page (default true) */
          showOnPageScrollEnd?: boolean;
          /** Set to false and hidden Toolbar/Tabbar will not become visible when you scroll page to top everytime. They will become visible only at the most top scroll position, in the beginning of the page (default true)  */
          showOnPageScrollTop?: boolean;

          animate?: boolean
        }
      | undefined;
  }

Describe alternatives you've considered My app contains 4 views. Each view is related with a tab. Only the first page in each view should show tabbar, all other pages after the first page should not have tabbar. Currently I need to manually add no-toolbar to all other pages. It will be great to define the auto-hide behavior for the tabbar. e.g.

1. if auto-hide is added to f7-toolbar, all pages that does not contain show-toolbar will not show tabbar
2. if auto-show is added to f7-toolbar, all pages that does not contain no-toolbar will show tabbar.

For example

<f7-toolbar ref="tabbar" tabbar labels bottom auto-hide>
    <f7-link
      v-for="(tab, id) in tabbarConfig.getTabs()"
      :key="id"
      :tab-link="`#view-${id}`"
      :tab-link-active="activeTabId === id"
      :text="tab.label"
    />
</f7-toolbar>

[Simone4e]

Please create a Codesandbox for visual confirm your bug.

[stanleyxu2005]

Please create a Codesandbox for visual confirm your bug.

Code link attached. https://codesandbox.io/s/hardcore-estrela-8djufu?file=/src/App.jsx It's a feature request. Not a real bug.