vue - 切换状态时变换旋转不会旋转回来

Question

当我点击按钮时，showMore 状态将被切换。

如果我第一次单击它，它会按预期旋转。
但是当我再次单击该按钮时，动画不起作用。

App.vue

<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() {
      let arrow = "turn-arrow";
      if (this.showMore === true) {
        return arrow;
      }
      return true;
    },
  },
};
</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;
    }
    .turn-arrow {
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
      transition: all 3000ms;
    }
    span {
      padding: 0 0.5rem;
    }
  }
}
</style>

代码沙盒：
https://codesandbox.io/s/headless-fire-ng001?file=/src/App.vue

Answer 1

我只是稍微重构了你的代码并简化了一些事情。

我没有使用transitions，而是将它们替换为animations，并在使用此动画的.rotate-down 和.rotate-up 类之间切换。

查看：https://codesandbox.io/s/wonderful-wescoff-icnnm?file=/src/App.vue

希望对你有帮助:)！