请问如何改才能实现蒙版的逐渐显示?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Title</title>
<style>
.mask {
position: fixed;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .7);
height: 80%;
width: 100%;
-webkit-transition: -webkit-transform .8s;
transition: -webkit-transform .8s;
transition: transform .8s;
transition: transform .8s,-webkit-transform .8s;
display: none;
}
</style>
</head>
<body>
<div>
<div id="t1">
321
</div>
<div class="mask">
123
</div>
</div>
<script>
document.getElementById('t1').onclick = function () {
document.getElementsByClassName('mask')[0].style.display = 'block'
}
</script>
</body>
</html>
display:block
和display:none
之间根本没有过渡态,自然就不可能有过渡动画,显/隐切换的过渡动画通常是通过改变opacity
值来实现的,因为opacity:0
和opacity:1
之间可以有过渡态。transition
属性的第一个值与需要过渡的属性相匹配,比如transform
对应transform
的变化,opacity
对应opacity
的变化,如果懒得写具体的属性,可以用all
代替。