前端实现鼠标点击箭头旋转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;
};
相关推荐
快起来别睡了几秒前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript
乌兰麦朵10 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai10 分钟前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
Code季风11 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾11 分钟前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿12 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸13 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端
Pedantic13 分钟前
我们什么时候应该使用协议继承?——Swift 协议继承的应用与思
前端·后端
Software攻城狮14 分钟前
vite打包的简单配置
前端
Codebee14 分钟前
如何利用OneCode注解驱动,快速训练一个私有的AI代码助手
前端·后端·面试