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

【问题标题】：Animate list items (stagger) on the initial render of list在列表的初始渲染上动画列表项（交错）
【发布时间】：2018-09-17 02:19:39
【问题描述】：

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

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

我认为我可以使用 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 组件时，这些方法（当然是我添加到方法中的）甚至不会被执行。可能是因为没有添加或删除项目。

【问题讨论】：

也许您错过了transition-group 上的appear option？
另外，结尾的</li> 看起来不见了。
当我简化代码时 li 迷路了 :)

标签： javascript css vue.js vuejs2 transition

【解决方案1】：

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

你是对的，你需要的是：

Transitions on Initial Render

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

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

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

【讨论】：

谢谢！ <transition-group appear> 是我所缺少的。现在可以了。 :D

【解决方案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

【讨论】：