Vue中如何在transform缩放动画结束后修改盒子背景色为绿色

可以通过监听transitionend事件捕获缩放动画的结束时机，再调整元素背景色，以下是完整的实现方案：

1. 调整模板结构 #

给盒子添加过渡结束事件监听，同时用两个动态类区分动画状态：

<template>
  <div id="container">
    <div
      id="box"
      @click.stop="clickAction"
      :class="{ 'changing': isClicked, 'ended': animateEnded }"
      @transitionend="handleTransitionEnd"
    ></div>
  </div>
</template>

注意：Vue模板里无需用this.访问数据/方法，直接写变量名即可。

2. 完善逻辑代码 #

新增状态变量标记动画结束，在过渡结束时判断并切换状态：

<script>
export default {
  name: "App",
  data() {
    return {
      isClicked: false,
      animateEnded: false
    };
  },
  methods: {
    clickAction() {
      this.isClicked = true;
      // 重置动画结束状态，支持重复点击触发
      this.animateEnded = false;
    },
    handleTransitionEnd(e) {
      // 仅监听transform属性的过渡结束，避免其他干扰
      if (e.propertyName === 'transform') {
        this.animateEnded = true;
      }
    }
  }
};
</script>

3. 拆分CSS样式 #

把动画过程和结束后的样式分开，避免冲突：

<style>
#container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#box {
  background-color: brown;
  padding: 2em;
  margin: 2em;
  width: 100px;
  height: 100px;
  cursor: pointer;
  transform-origin: center;
  transition: transform 3s;
}

#box:hover {
  opacity: 0.8;
}

/* 点击后触发缩放动画时的样式 */
.changing {
  background-color: cyan;
  transform: scale(2);
}

/* 缩放动画结束后的绿色样式 */
.ended {
  background-color: green !important;
}
</style>

关键说明 #

• transitionend事件会在CSS过渡完成后触发，通过propertyName判断可以精准定位到缩放动画的结束时机。
• 用两个独立状态变量控制样式，能清晰区分“触发动画”和“动画完成”两个阶段，还支持重复点击重新触发动画。

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