vue 点击图标旋转

申多事儿

已于 2022-03-22 13:57:00 修改

阅读量2.3k

点赞数 2

CC 4.0 BY-SA版权

文章标签： ui javascript css

于 2022-03-07 11:41:41 首次发布

本文链接：https://blog.csdn.net/weixin_46031116/article/details/123326680

本文介绍了如何在Vue项目中，通过监听点击事件结合CSS3的transform属性，实现图标在点击后进行旋转动画的效果，详细讲解了实现步骤和关键代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style lang="css" scoped>
    .a{
        transition: all 2s;
    }
    .g{
        transform:rotate(-180deg);
        transition: all 2s;
    }
</style>
<template>
<div>
    <a-icon type="up" :class="[state?'g':'a']" @click="Change"/>  //class随state的true或者false改变 
</div>
 
</template>
<script>
export default {
  data () {
    return {
        state:false
    }
  },
  methods: {
      Change(){
          this.state=!this.state;
          console.log(this.state)
      }
  }
}
</script>