Cuando hago clic en el botón, se alternará el estado showMore .

Si hago clic en él la primera vez, gira como se esperaba.
Pero cuando vuelvo a hacer clic en el botón, la animación no funciona.

aplicación.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>

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