javascript - 在列表的初始渲染上动画列表项(交错)

Question

我正在尝试构建一个导航，它在显示菜单/导航时错开包含的列表项的外观。

我有一个汉堡符号，单击它时会呈现导航(全屏)。我现在想要一个动画，其中不同的列表项(实际链接)出现时彼此有一些延迟，顶部的是第一个，底部的是最后一个。

我想我可以用 vue 的 <transition-group> 做到这一点和 list transitions ，但所有示例都是关于添加和删除列表项的，而我从一开始就有了所有这些。

然后我读到这个:Vue.js: Staggering List Transitions我想可能就是这样。不幸的是，我也无法让它工作。

你有什么提示我可以怎么做吗？

到目前为止，我使用 v-if 渲染导航:

<transition name="u-anim-fade" mode="in-out">
  <Navigation v-if="navMenuOpen" />
</transition>

在导航组件中:

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

(我在这里省略了一些简化代码的东西)

当我添加此处建议的 enter/leave/onEnter 函数时:Vue.js: Staggering List Transitions

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

像这样:

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

当我渲染 Navigation 时，这些方法(当然是我添加到方法中的)甚至不会执行成分。可能是因为没有添加或删除元素。

Answer 1

Probably because the items are not added or removed.

你是对的，你需要的是:

Transitions on Initial Render

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

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

我刚刚尝试过，如果不存在，则不会在初始渲染时调用监听器函数。

请注意，它也适用于 <transition-group>组件。