今天记录一个css小技巧 既不用setTimeout 也不用监听transitioned事件 实现display：block/none的显示渐显过渡动画
准备工作dom元素和css准备，先实现一个简单的弹窗样式和一个控制按钮，觉得繁琐的直接跳到第1步看核心代码，不心急吃热豆腐的可以跟着我一起回顾弹窗的垂直居中css实现方式
<style> .content { /* 四行css实现垂直居中 */ position: relative; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); height: 200px; width: 200px; background-color: #fff; } .dialog { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); opacity: 0; display: none; transition: opacity 1s ease; } .dialog.block { display: block; } .dialog.visible { opacity: 1; transition: opacity 1s ease; } </style> <button type="button" onclick="change()">弹窗</button> <div class="dialog"> <div class="content"> <p>我是弹窗，嘿嘿</p> </div> </div> <body> <button type="button" onclick="change()">弹窗</button> <div class="dialog"> <div class="content"> <p>我是弹窗，嘿嘿</p> </div> </div> </body> JS控制显示隐藏我们都知道css的opacity、width、height、margin等属性可以通过transition实现渐变效果，但是display确不行。 可能的原因是display设置为block后，浏览器将其渲染到页面的过程是ui render，这个过程是一个宏，而js会优先执行同步代码，所以先执行了opacity：1。 如果在此时调用了clientHeight、offsetHeight可能触发了浏览器的某个渲染机制，先执行了display:block
var dialogEl = document.querySelector(".dialog"); function change() { dialogEl.classList.add("block"); // 最关键的是这一步，可以保证元素先渲染到页面，再执行opacity：1， // 除此之外还有offsetWidth、scrollHeight均有相同的效果 dialogEl.clientHeight; dialogEl.classList.add("visible"); }效果展示： 遗憾的是目前这种方式只能处理显示过渡动画， 还不能处理隐藏的过渡动画
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #CSS #display #动画 #ampltstyleampgt
