JS实现鼠标点击箭头旋转180度功能
作者：suoh's Blog
这篇文章主要介绍了JS实现鼠标点击箭头旋转180度的效果,通过点击三角按钮旋转180度,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
JS实现鼠标点击箭头旋转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;
};补充：
原生js自动触发点击事件
主动触发事件：使用dispatchEvent方法
该方法能模拟用户行为，如点击（click）操作等。 标准使用dispatchEvent方法，IE6/7/8则使用fireEvent方法。
var btn=document.getElementById("myBtn");
var event = new MouseEvent("click");
btn.dispatchEvent(event); // 触发myBtn的点击事件到此这篇关于JS实现鼠标点击箭头旋转180度的文章就介绍到这了,更多相关js箭头旋转180度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！