Vue切换状态时transform rotate无法反向旋转回退的问题如何解决

问题原因 #

• 计算属性arrowLeft逻辑错误：当showMore为false时返回了布尔值true，而非合法的类名字符串，导致class绑定异常。
• 过渡属性transition仅定义在.turn-arrow类下，只有元素添加该类时才会触发过渡，移除类时元素无过渡属性，因此反向旋转没有动画效果。

修复步骤 #

1. 修正计算属性返回值，showMore为false时返回空字符串，保证类名正常切换。
2. 将transition属性移至img元素的基础样式中，确保类添加、移除两个方向都能触发过渡。

修复后完整代码 #

<template>
  <div class="item">
    <button class="learn-more-btn" @click="toggleShow">
      <span>Rotate</span>
      <img
        src="./assets/logo.png"
        alt="arrow"
        :class="arrowLeft"
        width="50"
        height="50"
      />
    </button>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      showMore: false,
    };
  },
  methods: {
    toggleShow() {
      this.showMore = !this.showMore;
    },
  },
  computed: {
    arrowLeft() {
      return this.showMore ? "turn-arrow" : "";
    },
  },
};
</script>
<style scoped lang="scss">
.item {
  display: flex;
  border: 1px solid grey;
  width: 150px;
  .learn-more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    &:hover {
      cursor: pointer;
    }
    img {
      display: inline-block;
      transition: all 3000ms;
    }
    .turn-arrow {
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
    span {
      padding: 0 0.5rem;
    }
  }
}
</style>

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