CSS中display实现淡入淡出过渡效果的实例
2020-11-27
来源：我们爱旅游
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
position: relative;
}
input {/*按钮样式*/
cursor: pointer;
border: none;
outline: none;
background: #34BC9D;
color: #fff;
height: 40px;
}
img {
position: absolute;
transition: 1s;
left: 0;
top: 100%;
opacity: 0;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<p>
<input id="root" type="button" onclick="show()" value="点击显示图片">
<img id="img" src="http://www.qianduanzhan.com/zb_users/upload/2017/07/201707161500184837405094.png" alt="">
</p>
<script>
var root = document.getElementById("root");
var img = document.getElementById("img");
function show(){
if(root.value === "点击显示图片"){
root.value = "点击隐藏图片";
/*设置setTimeout，让display先执行，opacity后执行*/
img.style.display = "block";
setTimeout(function () {
img.style.opacity = 1;
},.1);
}else{
root.value = "点击显示图片";
img.style.opacity = 0;
/*隐藏需要先执行opacity，再执行display，否则无效*/
setTimeout(function () {
img.style.display = "none";
},900);
}
}
</script>
</body>
</html>