Transitions on Initial Render

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

可能是因为没有添加或删除这些项目。

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

Transitions on Initial Render

如果您还想在a的初始渲染上应用转换   节点，您可以添加appear属性：
<transition appear>
  
</transition>

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

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

在列表的初始渲染上为列表项设置动画（交错）

1 个答案:

Transitions on Initial Render