Vue的v-for数组新增首部元素时如何仅对新元素执行展开动画

原方案失效核心原因 #

• 你的not_expanded类是通过Vue响应式语法绑定的，手动操作DOM移除类没有意义，只要keepShut方法对当前数组第一个元素返回true，Vue下次更新DOM时会自动把not_expanded类加回去
• 手动移除类的时机错误，往数组插入新元素后Vue还未完成DOM更新，此时拿到的第一个子元素可能还是旧元素，或是浏览器无法捕捉到初始0高度的状态，动画无法触发
• 逻辑设计有缺陷：keepShut永远给数组第一个元素加折叠类，后续插入新元素时，旧的第一个元素会自动丢失折叠类，不符合你的需求

推荐实现方案 #

方案1：使用Vue内置<TransitionGroup>组件（最优解）

这是Vue官方专门为列表元素增删做过渡动画的组件，无需手动控制类和DOM，符合Vue数据驱动的设计思路。

1. 模板代码修改：

<TransitionGroup name="list" tag="div" id="brickHolder">
  <svg
    v-for="brick in bricks" 
    :key="brick.id" <!-- 必须用唯一稳定的key，禁止使用数组索引作为key -->
    class="expandable"
  ></svg>
</TransitionGroup>

2. 添加对应的CSS样式：

.expandable {
  height: 150px;
  overflow: hidden; /* 必须设置，否则高度为0时内容依然会溢出显示 */
  transition: all 0.3s ease; /* 动画时长可自行调整 */
}
/* 插入元素的初始状态 */
.list-enter-from {
  height: 0;
  opacity: 0; /* 可选，加透明度过渡效果更自然，不需要可删除 */
}

3. 业务逻辑无需额外修改，直接往bricks数组首部插入新元素即可，动画会自动触发。

方案2：沿用类控制逻辑的修改版

如果你不想用内置过渡组件，可以改做全数据驱动的类控制，不要手动操作DOM。

1. 模板代码修改：

<div id="brickHolder">
  <svg
    v-for="brick in bricks" 
    :key="brick.id"
    class="expandable" 
    :class="{not_expanded: brick.isNew}"
  ></svg>
</div>

2. 添加对应的CSS样式：

.expandable {
  height: 150px;
  overflow: hidden;
  transition: height 0.3s ease;
}
.not_expanded {
  height: 0;
}

3. 插入新元素的逻辑修改：

// 插入新元素时添加isNew标记位
this.bricks.unshift({
  id: 新元素的唯一id,
  // 其他你需要的属性
  isNew: true
})
// 等Vue完成DOM更新后，修改标记位移除折叠类，自动触发展开动画
this.$nextTick(() => {
  this.bricks[0].isNew = false
})

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