列表的单行icon的动效

zongfunday

于 2022-01-29 15:59:23 发布

阅读量689

点赞数

CC 4.0 BY-SA版权

文章标签： css javascript css3

本文链接：https://blog.youkuaiyun.com/u014788505/article/details/122744499

//dom                   

<span v-if="row.taskValidateStatus == 1" @click="taskStatusHandle(row,0)">
                      <img
                      :ref="`img${row.taskGuid}`"
                        src="@/assets/icon/caozuo.png"
                      />
                      启用
                    </span>


//js

let img = this.$refs[`img${row.taskGuid}`];
      console.log( img.className , 'className')
      img.className = "img_move moveleft"




//style

/* 启用状态动效 */
.img_move{
  transition: all .5s;
}
.moveleft{
  transform: translateX(10px);
}
.moveright{
  transform: translateX(-10px);
}