CSS⼩技巧---display显隐动画效果
今天记录⼀个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>
css特效文字
<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");
}
效果展⽰：
遗憾的是⽬前这种⽅式只能处理显⽰过渡动画， 还不能处理隐藏的过渡动画