Vuetify导航进入页面时如何实现列表项首次渲染入场动画

• 未定义对应过渡样式：你给过渡组件设置了name="view"属性，但没有编写任何以view-为前缀的Vue过渡生命周期CSS类，没有动画规则自然无法触发效果。
• 过渡组件选型错误：v-for生成的是多个并列DOM元素，单个<transition>组件仅支持单元素/单组件过渡，多元素列表入场需要使用<transition-group>组件。
• 存在渲染BUG：列表数据中有两个项的id均为5，v-for要求绑定的key值全局唯一，重复key会导致DOM映射异常，干扰动画正常触发。

要实现页面加载时卡片从左侧依次滑入的效果，按以下步骤修改代码：

1. 修改HTML模板 #

将循环内的单个<transition>替换为外层的<transition-group>，给每个卡片绑定动态延迟样式实现错峰入场：

<div id="app">
  <v-app dark>
    <!-- 列表过渡用transition-group，tag指定渲染为div，避免额外标签破坏布局 -->
    <transition-group name="view" appear tag="div" class="box" justify="center" align="center">
      <div v-for="(item, index) in list" :key="item.id" :style="{transitionDelay: `${index * 0.1}s`}">
        <div class="card">{{item.name}}</div>
      </div>
    </transition-group>
  </v-app>
</div>

2. 修复JS数据 #

把重复的id改成唯一值：

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  data: {
    list: [
      {id: 1, name: "Lorem"},
      {id: 2, name: "Ipsum"},
      {id: 3, name: "Dolor"},
      {id: 4, name: "Sit"},
      {id: 5, name: "Amet"},
      {id: 6, name: "Consectetur"} // 原重复id:5的项修改为唯一id
    ]
  }
});

3. 补充过渡CSS样式 #

添加view前缀对应的入场过渡规则，实现左滑淡入效果：

.box {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
}
.box .card  {
  width: 30vw;
  height: 200px;
  background-color: white;
  color: black;
  border: 1px solid red;
}

/* 入场动画初始状态 */
.view-appear {
  opacity: 0;
  transform: translateX(-60px); /* 初始位置在元素左侧60px处 */
}
/* 入场动画执行规则 */
.view-appear-active {
  transition: all 0.4s ease-out;
}
/* 入场动画完成状态（可省略，默认继承元素本身样式） */
.view-appear-to {
  opacity: 1;
  transform: translateX(0);
}

调整index * 0.1s的数值可以修改卡片之间的入场间隔，修改translateX的数值和transition时长可以调整滑入距离、动画播放速度。

内容的提问来源于stack exchange，提问作者Mr.P