Vue如何实现元素插入时加永久class、离开时移除以适配自定义动画

你的需求可以通过Vue Transition的原生JavaScript钩子能力实现，不需要额外依赖其他方案。

实现逻辑 #

利用Transition/Transition-group组件暴露的enter、leave生命周期钩子手动操作类：

1. 进入阶段：元素插入DOM后下一帧主动添加open类，该类由你手动控制，Vue不会自动移除，可永久保留在元素上
2. 离开阶段：触发离开钩子时先移除open类触发关闭动画，等待动画执行完成后再通知Vue销毁元素

代码修改 #

模板部分 #

给你的Transition和Transition-group组件添加钩子绑定：

<transition :duration="300" @enter="handleEnter" @leave="handleLeave">
  <div class="accordion" v-if="equipmentSelections.length === 0">
    <div>
      <p>Begin by selecting equipment from the list</p>
    </div>
  </div>
 </transition>
 
<transition-group :duration="300" @enter="handleEnter" @leave="handleLeave">
  <div v-for="equipment in equipmentSelections" :key="equipment.unitNumber" class="accordion">
    <div>
      <h3 @click="updateSelections(equipment)">{{equipment.unitNumber}}</h3>
    </div>
  </div>
</transition-group>

方法部分 #

在组件的methods中添加两个钩子处理函数：

methods: {
  handleEnter(el, done) {
    // 下一帧添加open类，和v-enter-to触发时机一致
    requestAnimationFrame(() => {
      el.classList.add('open')
    })
    // 匹配你设置的300ms动画时长，结束后通知Vue
    setTimeout(done, 300)
  },
  handleLeave(el, done) {
    // 移除open类触发关闭动画
    el.classList.remove('open')
    // 等待动画执行完成后通知Vue移除元素
    setTimeout(done, 300)
  }
}

方案优势 #

• 完全适配v-if单元素场景和v-for列表组场景，每个进入/离开的元素都会独立触发钩子
• 不需要修改你现有的CSS样式逻辑，原有动画效果完全复用
• 类的增删时机完全可控，open类会一直保留在展示状态的元素上，不会被Vue自动清理

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