I am currently working on creating a navigation menu that has a staggered effect when the list items appear upon opening the menu.
Using a burger symbol to toggle the navigation menu to fullscreen, I want to incorporate an animation where each list item (links) appears with a delay relative to each other, starting from the top and working down to the bottom.
My initial approach was to utilize vue's <transition-group> along with list transitions, but the examples I found focused on adding/removing list items rather than staggering their appearance from the start.
I then came across: Vue.js: Staggering List Transitions, which seemed promising. However, I encountered difficulties implementing it successfully.
Do you have any insights or suggestions on how I can achieve this effect?
Currently, I am using v-if to render the navigation:
<transition name="u-anim-fade" mode="in-out">
<Navigation v-if="navMenuOpen" />
</transition>
Within the Navigation component:
<nav>
<ul class="Navigation__list">
<li
v-for="(item, key) in menu.items"
class="Navigation__item"
:key="`nav-item-${key}`">
<nuxt-link>
<span v-html="item.title" />
</nuxt-link>
</ul>
</nav>
(Some code has been omitted for brevity)
After trying to incorporate the enter/leave/onEnter functions as suggested in Vue.js: Staggering List Transitions
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
As shown below:
<nav>
<transition-group
name="staggered-fade"
tag="ul"
class="Navigation__list"
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
>
<li
v-for="(item, key) in menu.items"
class="Navigation__item"
:key="`nav-item-${key}`">
<nuxt-link>
<span v-html="item.title" />
</nuxt-link>
</transition-group>
</nav>
The methods I added to the component were not being executed when rendering the Navigation component, most likely because the items were not being added or removed dynamically.