How to make a Framework 7 toolbar animation?

62 Views Asked by At

.toolbar {
  height: 10vh;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
  background-color: var(--black-bg) !important;
  i {
    color: white;
  }
  .tabbar-label {
    color: white;
  }
  .tab-link-active {
    background-color: white;
    border-radius: 30px;
    .tabbar-label {
      color: var(--chili);
    }
    i {
      color: var(--chili);
    }
  }
}
<div class="toolbar toolbar-bottom tabbar-icons">
  <div class="toolbar-inner">
    <a href="#view-home" class="tab-link tab-link-active">
      <i class="icon f7-icons if-not-md">house_fill</i>
      <i class="icon material-icons if-md">home</i>
      <span class="tabbar-label">Home</span>
    </a>
    <a href="#view-catalog" class="tab-link">
      <i class="icon f7-icons if-not-md">square_list_fill</i>
      <i class="icon material-icons if-md">view_list</i>
      <span class="tabbar-label">Catalog</span>
    </a>
    <a href="#view-settings" class="tab-link">
      <i class="icon f7-icons if-not-md">gear</i>
      <i class="icon material-icons if-md">settings</i>
      <span class="tabbar-label">Settings</span>
    </a>
    <a href="#view-settings" class="tab-link">
      <i class="icon f7-icons if-not-md">gear</i>
      <i class="icon material-icons if-md">settings</i>
      <span class="tabbar-label">Settings</span>
    </a>
    <a href="/fav/" class="tab-link">
      <i class="icon f7-icons if-not-md">gear</i>
      <i class="icon material-icons if-md">settings</i>
      <span class="tabbar-label">Favoritos</span>
    </a>
  </div>
</div>

I am currently developing an app using F7, i have a toolbar ( the bottom menu) , what i want to achieve is, when i the active page changes, the background color from the previous item slides to the new active page indicator.

This is an example of what i am trying to achieve:

https://www.jqueryscript.net/menu/sliding-active-nav-item-indicator.html

Yet, this does not work with F7

This is my current design, i need the white background color to slide horizontally to the page i click on

This is my first time attempting something like this

0

There are 0 best solutions below