display实现淡入淡出过渡效果

最新推荐文章于 2024-04-25 16:16:15 发布

槐序二十四

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量3.9k

点赞数

分类专栏：前端文章标签： javascript css html jquery 前端

本文链接：https://blog.youkuaiyun.com/weixin_40836179/article/details/108225718

版权

前端专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		div {
			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>
	<div>
		<input id="root" type="button" onclick="show()" value="点击显示图片">
		<img id="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=304341154,1082578760&fm=26&gp=0.jpg" alt="">
	</div>
<script>
	var root = document.getElementById("root");
	var img = document.getElementById("img");

	function show() {
		if (root.value === "点击显示图片") {
			/*设置setTimeout，让display先执行，opacity后执行*/
			root.value = "点击隐藏图片";
			img.style.display = "block";
			setTimeout(function () {
				img.style.opacity = 1;
			}, .1);
		} else {
			root.value = "点击显示图片";
			/*隐藏需要先执行opacity，再执行display，否则无效*/
			img.style.opacity = 0;
			setTimeout(function () {
				img.style.display = "none";
			}, 600);
		}
	}</script>
</body>
</html>

很实用的代码，自己写起来确实够慢，记录一下，亲测能用

但是！提前给你们交个底，第一次用的时候无效，暂未解决。

谁要是有解决办法还请指教。