Vue.js 2表单元素分组淡入动画问题：仅显示第一组如何解决

嘿，我来帮你搞定这个登录页面分组依次淡入的需求～ 你现在的问题出在单个<transition>组件只能处理单个元素的过渡逻辑，没法直接驱动多个元素按顺序显示动画。下面给你两种靠谱的实现方式：

方法一：使用<transition-group>（简洁高效） #

<transition-group>专门用来处理多个元素的列表过渡，我们可以给每个分组设置不同的过渡延时，让它们依次触发淡入效果。

<template>
  <form class="form-signin" @submit.prevent="login">
    <!-- 用transition-group包裹所有分组，tag指定渲染的外层标签 -->
    <transition-group name="fade" tag="div">
      <!-- 第一组：0秒后开始淡入 -->
      <div key="1" :style="{ transitionDelay: '0s' }">
        <img class="mb-4" src="../assets/logo1.png" height="189px">
        <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
      </div>
      <!-- 第二组：间隔1秒后淡入 -->
      <div key="2" :style="{ transitionDelay: '1s' }">
        <label for="inputEmail" class="sr-only">邮箱地址</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="邮箱地址" required autofocus>
      </div>
      <!-- 第三组：间隔2秒后淡入 -->
      <div key="3" :style="{ transitionDelay: '2s' }">
        <label for="inputPassword" class="sr-only">密码</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="密码" required>
        <div class="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me"> 记住我
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
      </div>
    </transition-group>
  </form>
</template>

<style scoped>
/* 定义淡入淡出的过渡动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
/* 初始状态隐藏所有分组，确保过渡触发时才显示 */
.fade-item {
  opacity: 0;
}
</style>

说明： #

• transition-group会为每个带唯一key的子元素生成独立的过渡效果
• 通过transitionDelay给每个分组设置不同的延时，实现1秒间隔的依次淡入
• 如果是Vue 2版本，过渡类名要改成fade-enter（替换fade-enter-from）、fade-leave（替换fade-leave-to）

方法二：手动控制显示状态（灵活可控） #

如果需要更精细的动画控制（比如中途暂停、动态调整间隔），可以通过定时器依次切换每个分组的显示状态，配合单个<transition>使用。

<template>
  <form class="form-signin" @submit.prevent="login">
    <!-- 第一组的过渡 -->
    <transition name="fade" appear>
      <div v-if="showGroups[0]" key="1">
        <img class="mb-4" src="../assets/logo1.png" height="189px">
        <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
      </div>
    </transition>
    <!-- 第二组的过渡 -->
    <transition name="fade" appear>
      <div v-if="showGroups[1]" key="2">
        <label for="inputEmail" class="sr-only">邮箱地址</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="邮箱地址" required autofocus>
      </div>
    </transition>
    <!-- 第三组的过渡 -->
    <transition name="fade" appear>
      <div v-if="showGroups[2]" key="3">
        <label for="inputPassword" class="sr-only">密码</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="密码" required>
        <div class="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me"> 记住我
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
      </div>
    </transition>
  </form>
</template>

<script>
export default {
  data() {
    return {
      // 控制每个分组是否显示的数组
      showGroups: [false, false, false]
    }
  },
  mounted() {
    // 页面加载后，依次触发分组显示，间隔1秒
    this.showGroups[0] = true;
    setTimeout(() => this.showGroups[1] = true, 1000);
    setTimeout(() => this.showGroups[2] = true, 2000);
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

说明： #

• appear属性让组件首次渲染时就触发过渡动画（否则只有v-if从false变为true时才触发）
• 通过mounted钩子中的定时器，按顺序切换每个分组的显示状态，实现1秒间隔的淡入
• 这种方式可以轻松调整间隔时间，甚至根据业务逻辑动态控制动画触发时机

内容的提问来源于stack exchange，提问作者Jessi