css的display none和block实现隐藏展示效果比较生硬,自己参考资料实现了过渡一个效果,
可通过修改 transitionz中秒来调整过渡强度
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<script src="./asserts/js/jquery-3.6.3.min.js"></script>
<style>
.animated_opacity {
font-size: 12px;
width: 190px;
height: 25px;
background: #92b901;
color: #ffffff;
position: relative;
font-weight: bold;
padding: 8px 8px 0px 8px;
margin: 5px;
opacity: 0;
filter: Alpha(opacity=0);
transition: opacity 2s;
width: 100px;
height: 200px;
}
.animated_opacity.active {
opacity: 1;
filter: Alpha(opacity=100);
}
.btn-default {
background-color: #fff;
padding: 10px;
border: 1px solid #bbbbbb;
width: 150px;
}
.btngroup {
text-align: right;
margin: 8px 0;
z-index: 999;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".openUserEditBox").on("click", function () {
// $(".user-drawer")[0].style.left = "0";
$(".animated_opacity").addClass("active");
});
$(".closeUserEditBox").on("click", function () {
// $(".user-drawer")[0].style.left = "602px";
$(".animated_opacity").removeClass("active");
});
});
</script>
</head>
<body>
<button class="btn-default openUserEditBox">Show</button>
<button class="btn-default closeUserEditBox">Hide</button>
<div class="animated_opacity">点击后显示与消失</div>
</body>
</html>