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



  • <template>
    <q-layout view=“hHh LpR fff”>
    <q-header transition-hide=“fade” reveal elevated class=“bg-pink-10 q-pa-xs text-white animate” height-hint=“98”>
    <q-toolbar class=“vertical-middle”>
    <q-btn
    dense
    flat
    round
    icon=“menu”
    class=“lt-md”
    @click=“left = !left”
    />

        <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>



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



  • 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.



  • @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!