CSS隐藏元素的方法
<style type="text/css">
.display-hide{
display: none;
}
</style>
<section>
<div id="t1"></div>
</section>
<script type="text/javascript">
document.getElementById("t1").addEventListener("click",e => {
alert("第一次点击会隐藏，此后再也无法点击");
e.srcElement.classList.add("display-hide");
})
</script>
<style type="text/css">
.opacity-hide{
opacity: 0;
}
</style>
<section>
<div id="t2">opacity</div>
</section>
<script type="text/javascript">
document.getElementById("t2").addEventListener("click",e => {
alert("第一次点击会透明，依旧占据原本位置，点击事件依旧有效，动画过渡效果生效");
e.srcElement.classList.add("opacity-hide");
})
</script>
<style type="text/css">
.visibility-hide{
visibility: hidden;
}
</style>
<section>
<div id="t3">
<div>visibility</div>
<div style="visibility: visible; color: #000;">still show</div>
</div>
</section>
<script type="text/javascript">
document.getElementById("t3").addEventListener("click",e => {
alert("第一次点击会隐藏，依旧占据原本位置，点击事件不再生效");
e.srcElement.classList.add("visibility-hide");
})
</script>
<style type="text/css">
body{
overflow: hidden;
}
.posistion-origin{
position: absolute;
left: 5px;
top: 5px;
}
.position-hide{
left: -150px;
}
</style>
<section style="position: relative;height: 115px;">
<div id="t4" class="posistion-origin" >position</div>
</section>
<script type="text/javascript">
document.getElementById("t4").addEventListener("click",e => {
alert("第一次点击会隐藏，元素不占据原本位置，过渡动画有效");
e.srcElement.classList.add("position-hide");
})
</script>
<style type="text/css">
.clip-path-hide{
clip-path: polygon(0 0,0 0);
}
</style>
<section>
<div id="t5" >clip-path</div>
</section>
<script type="text/javascript">
document.getElementById("t5").addEventListener("click",e => {
alert("第一次点击会隐藏，元素占据原本位置，点击事件不再生效");
e.srcElement.classList.add("clip-path-hide");
})
</script>
<style type="text/css">
.height-hide{
height: 0 !important;
overflow: hidden;
}
</style>
<section>
<div id="t6" >height</div>
</section>
<script type="text/javascript">
document.getElementById("t6").addEventListener("click",e => {
alert("第一次点击会隐藏，元素不占据原本位置，点击事件不再生效，过渡动画有效");
e.srcElement.classList.add("height-hide");
})
</script>
<!DOCTYPE html>
<html>
<head>
<title>隐藏元素</title>
<style type="text/css">
body{
overflow: hidden;
}
section > div:first-child{
width: 100px;
height: 100px;
background-color: blue;
}
section{
border-bottom: 1px solid #eee;
padding: 5px;
box-sizing: border-box;
}
div{
color: #fff;
transition: all .3s;
}
.display-hide{
display: none;
}
.opacity-hide{
opacity: 0;
}
.visibility-hide{
visibility: hidden;
}
.posistion-origin{
position: absolute;
left: 5px;
top: 5px;
}
.position-hide{
left: -150px;
}
.clip-path-hide{
clip-path: polygon(0 0,0 0);
}
.height-hide{
height: 0 !important;
overflow: hidden;
}
</style>
</head>
<body>
<section>
<div id="t1">display</div>
</section>
<section>
<div id="t2">opacity</div>
</section>
<section>
<div id="t3">
<div>visibility</div>
<div style="visibility: visible; color: #000;">still show</div>
</div>
</section>
<section style="position: relative;height: 115px;">
<div id="t4" class="posistion-origin" >position</div>
</section>
<section>
<div id="t5" >clip-path</div>
</section>
<section>
<div id="t6" >height</div>
</section>
</body>
<script type="text/javascript">
document.getElementById("t1").addEventListener("click",e => {
alert("第一次点击会隐藏，此后再也无法点击");
e.srcElement.classList.add("display-hide");
})
document.getElementById("t2").addEventListener("click",e => {
alert("第一次点击会透明，依旧占据原本位置，点击事件依旧有效，动画过渡效果生效");
e.srcElement.classList.add("opacity-hide");
})
document.getElementById("t3").addEventListener("click",e => {
alert("第一次点击会隐藏，依旧占据原本位置，点击事件不再生效");
e.srcElement.classList.add("visibility-hide");
})
document.getElementById("t4").addEventListener("click",e => {
alert("第一次点击会隐藏，元素不占据原本位置，过渡动画有效");
e.srcElement.classList.add("position-hide");
})
document.getElementById("t5").addEventListener("click",e => {
alert("第一次点击会隐藏，元素占据原本位置，点击事件不再生效");
e.srcElement.classList.add("clip-path-hide");
})
document.getElementById("t6").addEventListener("click",e => {
alert("第一次点击会隐藏，元素不占据原本位置，点击事件不再生效，过渡动画有效");
e.srcElement.classList.add("height-hide");
})
</script>
</html>
https://github.com/WindrunnerMax/EveryDay
https://www.cnblogs.com/jing-tian/p/10969109.html
https://blog.csdn.net/cuo9958/article/details/53559826
https://blog.csdn.net/weixin_41910848/article/details/81875725
服务热线 19970861797
