前端实现鼠标点击箭头旋转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;
};