How to add transition on q-header component when they reveal or hide out?

CodeArtist

    <q-toolbar-title style="min-height: 150px">
      <q-avatar style="min-height: inherit;font-size: 150px;">
        <img class="top-logo" src="../assets/index.svg" />
      </q-avatar>
    </q-toolbar-title>

    <q-space />
    <div style="min-width: 300px;">
      <q-input
        dark
        placeholder="Search..."
        borderless
        v-model="search"
        color="grey-1"
        type="search"
      >
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
    </div>
    <q-space />
    <div class=" q-gutter-md">
      <q-btn outline class="grey-1 q-pa-xs" label=" Sign In" />
      <q-btn outline class="grey-1 q-pa-xs" label="Sign Up" />
    </div>
    <q-btn
      dense
      flat
      round
      icon="menu"
      class="lt-md"
      @click="right = !right"
    />
  </q-toolbar>

  <q-tabs
    class="gt-sm"
    v-model="tab"
    align="justify"
    narrow-indicator
    :style="{ color: 'whitesmoke' }"
  >
    <q-tab name="women" label="WOMEN" @click="toggle('women')" />
    <q-tab name="men" label="MEN" @click="toggle('men')" />
    <q-tab name="kids" label="KIDS" @click="toggle('kids')" />
    <q-tab name="brands" label="BRANDS" @click="toggle('brands')" />
    <q-tab name="about" label="ABOUT" @click="toggle('about')" />
  </q-tabs>

  <div class="absolute fill-content">
    <q-tab-panels
      v-model="tab"
      animated
      class="bg-grey-4 text-white text-center"
      v-on:scroll.passive="removeTabPanels"
    >
      <q-tab-panel name="women">
        <div class="wrap">
          <tab-links :links="womenNavLinks" />
          <div
            v-for="(post, index) in women.slice(0, 3)"
            v-bind:item="post"
            v-bind:index="index"
            v-bind:key="post.imagePath"
          >
            <card-component
              :imagePath="getImage(post.imagePath)"
              :price="post.price"
              :productName="post.productName"
            />
          </div>
        </div>
      </q-tab-panel>

      <q-tab-panel name="men">
        <div class="wrap">
          <tab-links :links="menNavLinks" />
          <div
            v-for="(post, index) in men.slice(0, 3)"
            v-bind:item="post"
            v-bind:index="index"
            v-bind:key="post.imagePath"
          >
            <card-component
              :imagePath="getImage(post.imagePath)"
              :price="post.price"
              :productName="post.productName"
            />
          </div>
        </div>
      </q-tab-panel>

      <q-tab-panel name="kids">
        <div class="wrap">
          <tab-links :links="kidsNavLinks" />
          <div
            v-for="(post, index) in kids.slice(0, 3)"
            v-bind:item="post"
            v-bind:index="index"
            v-bind:key="post.imagePath"
          >
            <card-component
              :imagePath="getImage(post.imagePath)"
              :price="post.price"
              :productName="post.productName"
            />
          </div>
        </div>
      </q-tab-panel>

      <q-tab-panel name="brands">
        <div class="wrap">
          <tab-links :links="brandsNavLinks" />
          <div
            v-for="(post, index) in getBestBrands"
            v-bind:item="post"
            v-bind:index="index"
            v-bind:key="post.imagePath"
          >
            <card-component
              :imagePath="getImage(post.imagePath)"
              :price="post.price"
              :productName="post.productName"
            />
          </div>
        </div>
      </q-tab-panel>

      <q-tab-panel name="about">
        <div class="wrap">
          <div class="text-h6">Mails</div>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
      </q-tab-panel>
    </q-tab-panels>
  </div>
</q-header>

<q-drawer v-model="left" side="left" class="lt-md" overlay elevated>
  <!-- drawer content -->
</q-drawer>

<q-drawer v-model="right" side="right" class="lt-md" overlay elevated>
  <!-- drawer content -->
</q-drawer>

<q-page-container>
  <router-view />
</q-page-container>

<q-footer elevated class="bg-grey-8 text-white">
  <q-toolbar>
    <q-toolbar-title>
      <q-avatar>
        <img class="top-logo" src="../assets/index.svg" />
      </q-avatar>
      Title
    </q-toolbar-title>
  </q-toolbar>
</q-footer>

</q-layout>
</template>

CodeArtist

Guys Please help, i’m stuck here for hours now.

Coude

I would use the reveal event (see docs )

In template:

<q-header reveal elevated class=“bg-pink-10 q-pa-xs text-white animate” height-hint=“98” 
@reveal="handleReveal"
:class="isRevealed ? 'revealed' : 'not-revealed'"
>
...
</q-header>

in script:

handleReveal(isRevealed) {
  this.isRevealed = isRevealed;
//do something else if you want
}

and in style you can add css-transition

.revealed {
  background-color:rgba(255,255,255,0.94);
  transition: background-color 0.25s ease-in-out;
}

.not-revealed {
  background-color:rgba(255,255,255,0.01);
  transition: background-color 0.25s ease-in;
}

This is a start, hope it might help.

CodeArtist

@Coude Thanks a lot, will try it out however my main aim to to when the header hides out, it should do that gracefully. thanks for your input, i’m trying it out now!

No More Posting New Topics!

How to add transition on q-header component when they reveal or hide out?