css做旋轉(zhuǎn)動畫
新建一個(gè)data 比如叫 rotate:false
然后用三目運(yùn)算綁定class，v-bind:class=[rotate=true？'class a'：'class b']
然后點(diǎn)擊讓rotate發(fā)生改變
這樣應(yīng)該可以實(shí)現(xiàn)的

<style scoped>

    .aa{

        transition: all 2s;

    }

    .go{

        transform:rotate(-180deg);

        transition: all 2s;

    }

</style>

<template>

<div>

    <i :class="[rotate?'fa fa-arrow-down go':'fa fa-arrow-down aa']" @click="start"></i> //class隨rotate的true或者false改變 我這為圖方便用了項(xiàng)目里的圖標(biāo)測試，圖片也是一樣的~

</div>

</template>

<script>

export default {

  data () {

    return {

        rotate:false

    }

  },

  methods: {

      start(){

          this.rotate=!this.rotate;

          console.log(this.rotate)

      }

  }

}

</script>