CSS实现渐隐渐现效果
CSS实现渐隐渐现效果
实现渐隐渐现效果是⽐较常见的⼀种交互⽅式，通常的做法是控制display属性值在none和其它值之间切换，虽说功能可以实现，但是效果略显⽣硬，所以会有这样的需求——希望元素消失时具有平滑的效果。
实现
opacity
opacity是⽤以设置透明度的属性，单纯将opacity设置为0只能从视觉上隐藏元素，⽽元素本⾝依然占据它⾃⼰的位置并对⽹页的布局起作⽤，它也将响应⽤户交互例如点击事件，对于其添加过渡属性可以显⽰动画效果，使⽤transitionend事件监听过渡完成之后隐藏元素，此外对于opacity属性，可以利⽤其透明的视觉效果制作点击劫持攻击。
<!DOCTYPE html>
<html>
<head>
<title>opacity</title>
<style type="text/css">
.page{
width: 200px;
padding: 10px 20px;
border: 1px solid #eee;
}
.container{
overflow: hidden;
}
.
container > .options{
opacity: 1;
transition: all .5s;
}
.container > .btn{
color: #4C98F7;
cursor: pointer;
text-decoration: underline;
}
.container > .hide{
display: none;
}
.container > .fold{
opacity: 0;
}
</style>
</head>
cssclass属性<body>
<div class="page">
<div class="container">
<div class="btn"onclick="operate(this)"unfold="1">隐藏</div>
<div class="options">
<div class="option">选项1</div>
<div class="option">选项2</div>
<div class="option">选项3</div>
<div class="option">选项4</div>
<div class="option">选项5</div>
<div class="option">选项6</div>
<div class="option">选项7</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function operate(btn){
const optionsNode = document.querySelector(".container > .options");
const unfold = Attribute("unfold");
if(unfold && unfold==="1"){
btn.innerText ="打开";
optionsNode.classList.add("fold");
const finish=()=>{
optionsNode.classList.add("hide");
optionsNode.addEventListener("transitionend", finish);// 添加}else{
btn.innerText ="隐藏";
ve("hide");
setTimeout(()=> ve("fold"));
}
btn.setAttribute("unfold", unfold ==="0"?"1":"0");
}
</script>
</html>
visibility opacity
当visibility属性值为hidden的时候，元素将会隐藏，也会占据着⾃⼰的位置，并对⽹页的布局起作⽤，与opacity不同的是它不会响应任何⽤户交互，元素在读屏软件中也会被隐藏，如果对于⼦元素的visibility被设置为visible⽽⽗元素的visibility设置为hidden，⼦元素依旧可以显⽰⽽⽗元素会被隐藏，这
个属性在兼容性⽅⾯需要在IE 9以上的浏览器才能使⽤。此外从visibility: hidden；到visibility: visible；变化时，如果设置了过渡时间为3s，那么在事件发⽣后，元素并不会⽴即呈现出从hidden到visible的效果，⽽是会先等待3s，然后再瞬间隐藏，从显⽰到最终消失视线中的时间确实3s，只不过并不是逐渐过渡出现的，所以通常为了实现过渡效果，我们与opacity⼀起使⽤来完成过渡效果。
<!DOCTYPE html>
<html>
<head>
<title>opacity</title>
<style type="text/css">
.page{
width: 200px;
padding: 10px 20px;
border: 1px solid #eee;
}
.container{
overflow: hidden;
}
.container > .options{
opacity: 1;
visibility: visible;
transition: all .5s;
}
.container > .btn{
color: #4C98F7;
cursor: pointer;
text-decoration: underline;
}
.container > .hide{
display: none;
}
.container > .fold{
opacity: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<div class="btn"onclick="operate(this)"unfold="1">隐藏</div>
<div class="options">
<div class="option">选项1</div>
<div class="option">选项2</div>
<div class="option">选项3</div>
<div class="option">选项4</div>
<div class="option">选项5</div>
<div class="option">选项6</div>
<div class="option">选项7</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function operate(btn){
const optionsNode = document.querySelector(".container > .options");
const unfold = Attribute("unfold");
if(unfold && unfold==="1"){
btn.innerText ="打开";
optionsNode.classList.add("fold");
const finish=()=>{
optionsNode.classList.add("hide");
optionsNode.addEventListener("transitionend", finish);// 添加}else{
btn.innerText ="隐藏";
ve("hide");
setTimeout(()=> ve("fold"));
}
btn.setAttribute("unfold", unfold ==="0"?"1":"0");
}
</script>
</html>
每⽇⼀题
github/WindrunnerMax/EveryDay
参考
juejin/post/6844903497998024711
wwwblogs/MrZhujl/p/10315177.html blog.csdn/u012767761/article/details/87369414

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。