CSS实现渐隐渐现效果
CSS实现渐隐渐现效果
实现渐隐渐现效果是比较常见的一种交互方式，通常的做法是控制display属性值在none和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素消失时具有平滑的效果。
实现
opacity
opacitytitle> <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><body> <div class="page"> <div class="container"> <div class="btn" onclick="operate(this)" unfold="1">隐藏div> <div class="options"> <div class="option">选项1div> <div class="option">选项2div> <div class="option">选项3div> <div class="option">选项4div> <div class="option">选项5div> <div class="option">选项6div> <div class="option">选项7div> div> div> div>body><script type="text/javascript"> function operate(btn){ const optionsNode = document.querySelector(".container > .options"); const unfold = btn.getAttribute("unfold"); if(unfold && unfold==="1"){ btn.innerText = "打开"; optionsNode.classList.add("fold"); const finish = () => { optionsNode.classList.add("hide"); optionsNode.removeEventListener("transitionend", finish); // 移除监听器 } optionsNode.addEventListener("transitionend", finish); // 添加监听器 }else{ btn.innerText = "隐藏"; optionsNode.classList.remove("hide"); setTimeout(() => optionsNode.classList.remove("fold")); } btn.setAttribute("unfold", unfold === "0" ? "1" : "0"); }script>html></p><p>visibility opacity</p><p>当visibility属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与opacity不同的是它不会响应任何用户交互，元素在读屏软件中也会被隐藏，如果对于子元素的visibility被设置为visible而父元素的visibility设置为hidden，子元素依旧可以显示而父元素会被隐藏，这个属性在兼容性方面需要在IE 9以上的浏览器才能使用。此外从visibility: hidden;到visibility: visible;变化时，如果设置了过渡时间为3s，那么在事件发生后，元素并不会立即呈现出从hidden到visible的效果，而是会先等待3s，然后再瞬间隐藏，从显示到最终消失视线中的时间确实3s，只不过并不是逐渐过渡出现的，所以通常为了实现过渡效果，我们与opacity一起使用来完成过渡效果。</p><p><html><head> <title>opacitytitle> <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">选项1div> <div class="option">选项2div> <div class="option">选项3div> <div class="option">选项4div> <div class="option">选项5div> <div class="option">选项6div> <div class="option">选项7div> div> div> div>body><script type="text/javascript"> function operate(btn){ const optionsNode = document.querySelector(".container > .options"); const unfold = btn.getAttribute("unfold"); if(unfold && unfold==="1"){ btn.innerText = "打开"; optionsNode.classList.add("fold"); const finish = () => { optionsNode.classList.add("hide"); optionsNode.removeEventListener("transitionend", finish); // 移除监听器 } optionsNode.addEventListener("transitionend", finish); // 添加监听器 }else{ btn.innerText = "隐藏"; optionsNode.classList.remove("hide"); setTimeout(() => optionsNode.classList.remove("fold")); } btn.setAttribute("unfold", unfold === "0" ? "1" : "0"); }script>html></p><p>每日一题</p><p>https://github.com/WindrunnerMax/EveryDay</p><p>
<strong>版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。</strong>
</p>
</div>
<div class="article_footer clear">
<div class="fr tag">标签：<a href="https://www.apispace.com/news/tags-1754.html">java</a>
</div>
<div class="bdsharebuttonbox fl share">
<div class="share-widget fl">
<div class="social-share" data-sites="wechat,weibo, qq, qzone"></div>
</div>
</div>
</div>
<!-- 广告位ad4 -->
<div class="post-navigation clear">
<div class="post-previous fl">
<span>上一篇:</span><a href="https://www.apispace.com/news/post/15397.html">Java中try</a>
</div>
<div class="post-next fr">
<span>下一篇:</span><a href="https://www.apispace.com/news/post/15399.html">QQ小程序支付</a>
</div>
</div>
</div>
<div class="related_article">
<div class="box_title clear">
<span><i class="icon fa fa-paper-plane"></i>相关文章</span>
</div>
<div class="related_list clear">
<article class="fl">
<div class="related_img"><a href="https://www.apispace.com/news/post/71750.html"><img src="https://www.apispace.com/news/zb_users/theme/zblog5_news/image/random_img/7.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.apispace.com/news/post/71750.html" title="java怎么拦截某个对象">java怎么拦截某个对象</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>337</span>
<span><i class="fa fa-clock-o"></i>2022-09-27</span>
</div>
</div>
</article>
<article class="fl">
<div class="related_img"><a href="https://www.apispace.com/news/post/71746.html"><img src="https://www.apispace.com/news/zb_users/theme/zblog5_news/image/random_img/3.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.apispace.com/news/post/71746.html" title="swing可视化界面怎么使用">swing可视化界面怎么使用</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>337</span>
<span><i class="fa fa-clock-o"></i>2022-09-27</span>
</div>
</div>
</article>
<article class="fl">
<div class="related_img"><a href="https://www.apispace.com/news/post/71742.html"><img src="https://www.apispace.com/news/zb_users/theme/zblog5_news/image/random_img/7.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.apispace.com/news/post/71742.html" title="java上下页翻转功能怎么实现">java上下页翻转功能怎么实现</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>337</span>
<span><i class="fa fa-clock-o"></i>2022-09-27</span>
</div>
</div>
</article>
</div>
</div>
<div id="comment" class="post-comment clearfix sb br mt">
<p id="comments-title" class="c-title mb bn"><span><i class="fa fa-pencil"></i> 发表评论</span></p>
<div class="compost">
<form id="frmSumbit" target="_self" method="post" action="https://www.apispace.com/news/zb_system/cmd.php?act=cmt&postid=15398&key=efc2ff585deeef984ac312b1b2175989">
<input type="hidden" name="inpId" id="inpId" value="15398"/>
<input type="hidden" name="inpRevID" id="inpRevID" value="0"/>
<div class="com-name">
<a rel="nofollow" id="cancel-reply" href="#comments" style="display:none;">取消回复</a>
</div>
<div class="com-info">
<ul>
<li>
<span class="hide" for="author"></span>
<input class="ipt" type="text" name="inpName" id="inpName" value="" tabindex="2" placeholder="昵称(必填)">
</li>
<li>
<span class="hide" for="author"></span>
<input class="ipt" type="text" name="inpEmail" id="inpEmail" value="" tabindex="3" placeholder="邮箱">
</li>
<li>
<span class="hide" for="author"></span>
<input class="ipt" type="text" name="inpHomePage" id="inpHomePage" value="" tabindex="4" placeholder="网址">
</li>
</ul>
</div>
<div class="com-box">
<textarea placeholder="来都来了，说点什么吧..." class="textarea" name="txaArticle" id="txaArticle" cols="5" rows="5" tabindex="1"></textarea>
</div>
<div class="com-info"><button class="com-submit br brightness" name="sumbit" type="submit" tabindex="5" onclick="return zbp.comment.post()">发布评论</button></div>
</form>
</div> <div class="comment-list mt">
<p class="no-comment"><i class="iconfont icon-sofa"></i> 暂时没有评论，来抢沙发吧~</p> <span id="AjaxCommentBegin"></span>
<div class="pagination pagination-multi">
<ul>
</ul>
</div>
<span id="AjaxCommentEnd"></span>
</div>
</div>
</div>
</div>
<div class="sidebar">
<div id="tuijianwenzhang" class="part clear 推荐文章">
<div class="top">
<h3 class="title">推荐文章</h3>
</div>
<div class="side tuijianwenzhang"><ul><ul class="hot_posts"> <li><h4><a href="https://www.apispace.com/news/post/24039.html" title="api接口大全（api接口）">api接口有哪几种分类及功能</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/47319.html.html" title="开放api接口定义（api接口开发规范）">什么是API接口?API接口简单介绍</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/52320.html" title="短信api接口免费">短信API接口概述，短信API接口的优势</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/61141.html" title="7款快递物流的物流查询API工具，物流快递查询API接口怎么对接？">7款快递物流的物流查询API工具，物流快递查询API接口怎么对接？</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/56888.html" title="企业四要素: 了解企业经营成功的关键">企业四要素: 了解企业经营成功的关键</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/11123.html" title="什么是语音验证码?(语音验证码的优势),语音验证码平台有哪些">什么是语音验证码?,语音验证码平台有哪些</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/50104.html" title="全国工商数据系统（中国工商网数据库）">全国工商查询系统怎么查企业名录</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/23571.html" title="身份证实名认证接口（身份证实名认证接口免费）">哪些平台提供实名认证的接口？</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/49114.html" title="php调用api接口（php调用api接口教程）">PHP如何调用API接口?</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/49112.html" title="百度天气接口api（百度天气预报api）">如何使用百度天气预报API接口?</a></h4></li></ul></ul></div>
</div>
<div id="divPrevious" class="part clear previous">
<div class="top">
<h3 class="title">最近发表</h3>
</div>
<div class="side divPrevious"><ul><li><a title="c语言sscanf函数的用法是什么" href="https://www.apispace.com/news/post/71785.html">c语言sscanf函数的用法是什么</a></li>
<li><a title="r语言清空数组的方法是什么" href="https://www.apispace.com/news/post/71784.html">r语言清空数组的方法是什么</a></li>
<li><a title="c语言一维数组怎么快速排列" href="https://www.apispace.com/news/post/71783.html">c语言一维数组怎么快速排列</a></li>
<li><a title="linux怎么查看本机内存大小" href="https://www.apispace.com/news/post/71782.html">linux怎么查看本机内存大小</a></li>
<li><a title="linux cpu占用率如何看" href="https://www.apispace.com/news/post/71781.html">linux cpu占用率如何看</a></li>
<li><a title="r语言for循环语句怎么使用" href="https://www.apispace.com/news/post/71780.html">r语言for循环语句怎么使用</a></li>
<li><a title="python怎么过滤字符串中的英文字母" href="https://www.apispace.com/news/post/71779.html">python怎么过滤字符串中的英文字母</a></li>
<li><a title="php怎么获取input输入的值" href="https://www.apispace.com/news/post/71778.html">php怎么获取input输入的值</a></li>
<li><a title="r语言怎么删除数据表某一个数据" href="https://www.apispace.com/news/post/71777.html">r语言怎么删除数据表某一个数据</a></li>
<li><a title="c语言怎么删除数组中的数" href="https://www.apispace.com/news/post/71776.html">c语言怎么删除数组中的数</a></li>
</ul></div>
</div>
<div id="hot_posts" class="part clear hot_posts">
<div class="top">
<h3 class="title">热评文章</h3>
</div>
<ul class="hot_posts"><li><h4><a href="https://www.apispace.com/news/post/55442.html" title="数据接口api（数据接口API开发平台）">数据接口api（数据接口API开发平台）</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/55602.html" title="数据开放接口api（数据服务api开发）">数据开放接口api（数据服务api开发）</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/5107.html" title="Python爬虫教程：爬取酷狗音乐（python爬取音乐网站）">Python爬虫教程：爬取酷狗音乐（python爬取</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/69827.html" title="hbuilder怎么更改字体大小和颜色">hbuilder怎么更改字体大小和颜色</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/66707.html" title="直播平台api接口 - 构建卓越的直播平台">直播平台api接口 - 构建卓越的直播平台</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/55574.html" title="实时股票数据api接口（股票实时行情api接口）">实时股票数据api接口（股票实时行情api接口）</a></h4></li></ul> </div> </div>
</div>
</section>
</div>
<footer class="p-footer">
<div class="contant_box">
<div class="discover_tmt">
</div>
<div class="collaboration_box">
<h5 class="" style="font-size: 1px; color: white;">apispace</h5>
<div class="text_box">
<a href="https://www.jiasou.cn/article/" title="toB数字化营销SEO" style="font-size: 1px; color: white;">加搜toBSEO</a>
<a href="https://www.finclip.com/news/category-1.html" title="小程序工具" style="font-size: 1px; color: white;">前端框架</a>
<a href="https://www.jia-ai.com/info/" title="小红书营销攻略" style="font-size: 1px; color: white;">小红书营销攻略</a>
<a href="https://www.yanyin.tech/cms/" title="生物研究资讯" style="font-size: 1px; color: white;">生物研究资讯</a>
<a href="https://www.finclip.com/news/" title="FinClip 技术文档" style="font-size: 1px; color: white;">小程序容器帮助中心</a>
<a href="https://www.finclip.com/news/article/" title="小程序开发行业洞察" style="font-size: 1px; color: white;">小程序开发行业洞察</a>
<a href="https://www.foneplatform.com/jscms/" title="全面预算管理资讯" style="font-size: 1px; color: white;">全面预算管理资讯</a>
<a href="https://www.weiling.cn/article/" title="企微SCRM客户管理干货" style="font-size: 1px; color: white;">企微SCRM客户管理干货</a>
<a href="https://www.vbasm.com/zh/" title="数据筛选平台" style="font-size: 1px; color: white;">数据筛选平台"</a>
</div>
</div>
<div class="we_img_box clear">
<div class="img_box">
<img src="https://www.apispace.com/news/zb_users/theme/zblog5_news/image/ewm.png" alt="" class="hover_tmt">
</div>
</div>
</div>
<p class="info">© 2023 XWNews <a href="#" target="_blank" rel="nofollow">京ICP备1111040123号-1</a>
<span>
<a href="https://www.zblogcn.com/">版权归zblog所有</a></span>
</p>
</footer>
<div id="backtop" class="backtop">
<div class="bt-box top">
<i class="fa fa-angle-up fa-2x"></i>
</div>
</div>
<script type='text/javascript' src="https://www.apispace.com/news/zb_users/theme/zblog5_news/script/custom.js"></script>
<script type='text/javascript' src="https://www.apispace.com/news/zb_users/theme/zblog5_news/script/nav.js"></script>
<link rel="stylesheet" href="https://www.apispace.com/news/zb_users/theme/zblog5_news/share/css/share.min.css">
<script src="https://www.apispace.com/news/zb_users/theme/zblog5_news/share/js/jquery.share.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
loop: true,
autoplay:2000,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
effect: 'fade',
});
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?3bff5280c95fa57a674d8373a0557e19";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script language="javascript" src="https://www.apispace.com/news/zb_users/plugin/ZF_ad/js/index.js?id=455"></script>
<script language="javascript" src="https://www.apispace.com/news/zb_users/plugin/ZF_ad/js/ZF_ad__cookie.js"></script>
</body>
</html><!--831.97 ms , 19 queries , 5659kb memory , 0 error-->