前端实现鼠标点击箭头旋转180度

效果:

复制代码
 <div @click="showChecklist" class="checkCLass cur pr-20px pl-20px pa flex ai-center">
     <span>{{ checkListStatus() }}</span>
     <p class="trangle"></p>
 </div>

下面是三角形状的样式

复制代码
  .trangle {
    width: 0;
    transition: all 0.2s ease-in;
    height: 0;
    border-bottom: 0 solid transparent;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 6px solid #fff;
  }
  .rotateBottom {
    transform: rotate(-180deg);
  }

点击,三角按钮旋转180度

复制代码
const showChecklist = () => {
  const dom = document.querySelector(".trangle");
  if (!isShowChecklist.value) {
    dom?.classList.add("rotateBottom");
  } else {
    dom?.classList.remove("rotateBottom");
  }
  isShowChecklist.value = !isShowChecklist.value;
};
相关推荐
RickyWasYoung26 分钟前
【matlab】字符串数组 转 double
android·java·javascript
csj5043 分钟前
前端基础之《React(4)—webpack简介-编译打包优化》
前端·react
万少1 小时前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
好玩的Matlab(NCEPU)1 小时前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰1 小时前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome
Crystal3282 小时前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476682 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
lecepin2 小时前
AI Coding 资讯 2025-10-29
前端·后端·面试
余道各努力,千里自同风2 小时前
小程序中获取元素节点
前端·小程序
PineappleCoder2 小时前
大模型也栽跟头的 Promise 题!来挑战一下?
前端·面试·promise