在列表的初始渲染上对列表项进行动画处理（交错）

Question

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

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

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

然后我读到了这篇文章：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

可能是因为未添加或删除项目。

你是对的，你需要的是这样的：

初始渲染时的过渡

如果您还想在节点的初始渲染上应用过渡，您可以添加以下appear属性：

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

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

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