I am trying to achieve a collapse effect or something similar
However, when I click on a menu item, the height changes too quickly without any animation
What could be wrong in my code?
I am looking to reference an effect similar to the one seen in the header of this website:
Here is my code written in Vue and SASS:
<Transition name="collapse" appear>
<div class="header" @mouseleave="closeHeader">
<div class="header__general">
<Icon name="logo" color="white" class="header__logo" />
<div class="header__links">
<p
v-for="item of MENU_ITEMS"
:key="item"
class="header__link"
@click="setCurrentMenuItem(item)"
>
{{ item }}
</p>
</div>
<SocialIcons color="white" />
<div class="header__button">
<Button :text="buttonText" @click="openWalletModal" />
</div>
<div class="header__menu" @click="openWalletModal">
<Icon name="menu" color="white" />
</div>
</div>
<TransitionGroup name="fade" appear mode="out-in">
<Component :is="menuComponent" :key="currentMenuItem" />
</TransitionGroup>
</div>
.fade-enter-from,
.fade-leave-to {
background: transparent;
opacity: 0;
overflow: hidden;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s ease-out;
}
.collapse-enter-from,
.collapse-leave-to {
background: transparent;
max-height: 0;
}
.collapse-enter-active,
.collapse-leave-active {
transition: max-height 4s ease-out;
}