列表的单行icon的动效

Vue任务状态动效切换

最新推荐文章于 2025-12-02 22:03:53 发布

原创最新推荐文章于 2025-12-02 22:03:53 发布 · 701 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #css3

//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);
}