vue 数据可视化大屏 项目开发过程中，需要实现一个按钮，按钮要可以点击，点击后，对应的图标需要有一个旋转的动画效果。

实现代码

<template>
  <div class="refresh" @click="getRefresh">
    <span>换一批</span>
    <img ref="icon_refresh" src="./assets/icon_refresh.png" alt="">
  </div>
</template>

<script>
import { gsap } from 'gsap';
export default {
  name: "refresh",
  data() {
    return {}
  },
  methods: {
    getData(e) {
      this.$emit('getData', e)
    },
    getRefresh(){
      gsap.to(this.$refs.icon_refresh, {
        duration: 1, // 动画持续时间
        rotation: '+=180', // 增加180度的旋转
        ease: 'linear', // 缓动函数
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.refresh {
  width: 90px;
  height: 28px;
  border: 1px solid #1182EA;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  cursor: pointer;

  span {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #9DB9E9;
    margin-left: 12px;
  }

  img {
    width: 15px;
    height: 13px;
    margin-right: 8px;
  }
}
</style>

更多动画效果

gsap 动画效果汇总