When I click the button, the state showMore will be toggled.

If I click it at the first time, it rotates as expected.
But when I click again the button, the animation doesn't works.

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>

Codesandbox:
https://codesandbox.io/s/headless-fire-ng001?file=/src/App.vue

CodePudding user response：

I just refactored your code a little bit and simplified things.

Instead of using transitions I replaced them with animations and toggled between .rotate-down and .rotate-up classes which use this animations.

Check it out: https://codesandbox.io/s/wonderful-wescoff-icnnm?file=/src/App.vue

Hope it's helpful :)!