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

Question

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

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

我以为我可以用 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 a node, you can add the appear attribute:
<transition appear>
  
</transition>

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

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

Answer 2

对于 vue 3 用户，使用 GSAP

<template>
  <div>
    <transition-group 
      appear
      tag="ul"
      @before-enter="beforeEnter"
      @enter="enter"
    >
      <li v-for="(item, index) in items" :key="icon.name" :data-index="index">
        <div>{{ item.text }}</div>
      </li>
    </transition-group>
  </div>
</template>

<script>
import { ref } from 'vue'
import { gsap } from 'gsap'
export default {
  setup() {
    const items = ref([
      { text: 'by email' },
      { text: 'by phone' },
    ])
    const beforeEnter = (el) => {
      el.style.opacity = 0
      el.style.transform = 'translateY(100px)'
    }
    const enter = (el, done) => {
      gsap.to(el, {
        opacity: 1,
        y: 0,
        duration: 0.8,
        onComplete: done,
        delay: el.dataset.index * 0.2
      })
    }
    return { items, beforeEnter, enter }
  }
}
</script>

更多信息here

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

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

javascript

css

transition

vue.js

vuejs2

Transitions on Initial Render