app.navbar.collapseLargeTitle animation

Questions
1

Hi everyone.

Just wondering if i’m doing something wrong. I’d like to use app.navbar.collapseLargeTitle() or app.navbar.toggleLargeTitle() to minimise the large title whenever a searchbar is clicked, similar to how the iOS app store search bar behaves.

My current route is like so:

{
    path: '/search/',
    url: './pages/search.html',
    on:
    {
      pageInit: function (e, page)
      {
        var searchbar = app.searchbar.create(
        {
          el: '.searchbar',
          on:
          {
            enable(sb)
            {
              //console.log("searchbar has been enabled");
              app.navbar.toggleLargeTitle(".search-navbar");
            },
            disable(sb)
            {
              //console.log("searchbar has been disabled");
              app.navbar.toggleLargeTitle(".search-navbar");
            },
          }
        });
      },
    }
  }

But as you can see in the video below, the behaviour is unexpected. On enable, there is no smooth animation like the default collapseLargeTitleOnScroll parameter.

Thanks. Please let me know if i am missing something.

2

It is kinda by design. If you need animation, you can add some extra class to such nabber, let’s say .my-navbar and this to CSS:

.my-navbar .navbar-bg,
.my-navbar .title,
.my-navbar .title-large .title-large-text {
  transition-duration: 400ms;
  transition-property: opacity, transform;
}
1 Like