箭头动画向下旋转

辣炒西红柿

已于 2023-06-02 11:27:19 修改

阅读量235

点赞数 1

文章标签： vue.js css

于 2023-06-02 11:25:10 首次发布

本文链接：https://blog.csdn.net/qq_39293316/article/details/131003501

版权

记录一个小技巧，在vue中实现点击按钮之后向左的箭头旋转为向下的箭头

<el-button type="primary" size="small" @click="addDefind">新增</el-button>

 <div class="iconBox" :style="[{transform:isActive ? 'rotate(90deg)' : ''}]">
    <i class="el-icon-arrow-right"></i>
 </div>

在data里面设置 isActive: false

export default {
    name: "",
    components:{},
    data() {
      return {
        isActive: false,
      };
    },
  }

点击事件

addDefind(){
  this.isActive = !this.isActive;
},

css样式

.iconBox {
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  transition: transform 0.5s;
  -moz-transition: -moz-transform 0.5s; /* Firefox 4 */
  -webkit-transition: -webkit-transform 0.5s; /* Safari 和 Chrome */
  -o-transition: -o-transform 0.5s;
}