Vue图标X轴拆分动画异常：动画失效或执行后复位

问题说明 #

在Vue3中实现两个图标沿X轴拆分的悬停动画时遇到两个问题：

• Codepen中动画完全无效果
• 本地项目中动画执行完毕后，图标自动回到初始位置，添加forwards属性也无法解决

问题原因 #

1. Codepen无效果：使用的<span>是行内元素，默认不支持transform属性，导致平移动画无法生效。
2. 动画后复位：Vue过渡结束后会移除enter-to类，而元素默认样式未设置最终位置，因此回到初始状态；且forwards是CSS关键帧动画的属性，对CSS过渡（transition）无效。

修复方案 #

核心调整点 #

• 将图标元素改为支持transform的类型（如设置position: absolute）
• 将图标的最终拆分位置作为默认样式，过渡从初始中间位置到最终位置，确保动画结束后保持状态
• 补充鼠标离开时的合并过渡动画

修复后代码 #

HTML

<html>
  <head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <div @mouseenter="showButtons" @mouseleave="hideButtons" class="container">
        <transition name="icon-transition">
          <span v-show="showButtonsFlag" class="icon icon-left">A</span>
        </transition>
        <transition name="icon-transition">
          <span v-show="showButtonsFlag" class="icon icon-right">B</span>
        </transition>
      </div>
    </div>
  </body>
</html>

JavaScript

const { createApp } = Vue

createApp({
  data() {
    return {
      showButtonsFlag: false,
    }
  },
  methods: {
    showButtons() {
      this.showButtonsFlag = true
    },
    hideButtons() {
      this.showButtonsFlag = false
    }
  }
}).mount('#app')

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 800px;
  height: 400px;
  border: 1px solid black;
  position: relative; /* 作为绝对定位图标的父容器 */
}

.icon {
  position: absolute; /* 脱离文档流，支持transform且不影响布局 */
  opacity: 1;
  font-size: 24px;
}

/* 图标最终位置 */
.icon-left {
  transform: translateX(-200px);
}

.icon-right {
  transform: translateX(200px);
}

/* 进入过渡：从中间透明状态过渡到最终位置 */
.icon-transition-enter-from {
  opacity: 0;
  transform: translateX(0);
}

.icon-transition-enter-active {
  transition: all 0.3s ease;
}

/* 离开过渡：从最终位置过渡到中间透明状态 */
.icon-transition-leave-from {
  opacity: 1;
}

.icon-transition-leave-to {
  opacity: 0;
  transform: translateX(0);
}

.icon-transition-leave-active {
  transition: all 0.3s ease;
}

说明 #

• 用position: absolute将图标转为支持transform的元素，同时避免布局偏移
• 把拆分后的位置写在图标默认类中，过渡结束后元素保持该状态
• 复用同一个过渡名称减少冗余代码，进入和离开动画逻辑对称

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