使用 javascript实现一个蒙版渐入渐出的效果，为什么改变display没用动画的效果，直接就弹出来了？
请问如何改才能实现蒙版的逐渐显示？
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
display:block和display:none之间根本没有过渡态，自然就不可能有过渡动画，显/隐切换的过渡动画通常是通过改变opacity值来实现的，因为opacity:0和opacity:1之间可以有过渡态。transition属性的第一个值与需要过渡的属性相匹配，比如transform对应transform的变化，opacity对应opacity的变化，如果懒得写具体的属性，可以用all代替。参考上面答者给出的方案，lz看是否能满足效果