Animate list items (stagger) on the initial render of list

Question

I am trying to build a navigation which staggers the appearance of the contained list items when the menu/navigation is shown.

I have a burger symbol, and when clicked it renders the navigation (fullscreen). I would now like to have an animation, where the different list items (actual links) appear with some delay to each other, the top one being the first and the bottom one the last.

I thought I could do this with vue's <transition-group> and list transitions, but all the examples are about adding and removing list items, whereas I have all of them from the beginning.

I then read about this: Vue.js: Staggering List Transitions And I thought that might be it. Unfortunately I could not get it to work either.

Do you have any hints how I could do that?

So far, I render the navigation with v-if:

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

(I left out some stuff simplify the code here)

When I add the enter/leave/onEnter functions which are suggested here: Vue.js: Staggering List Transitions

v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"

Like so:

<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 (which I add to the methods of course) would not even be executed when I render the Navigation component. Probably because the items are not added or removed.

Answer 1

Probably because the items are not added or removed.

You're right, and what you need is this:

Transitions on Initial Render

If you also want to apply a transition on the initial render of a node, you can add the appear attribute:

<transition appear>
  <!-- ... -->
</transition>

I just tried it and if not present, the listener functions aren't called on the initial render.

Note that it works as well with <transition-group> components.