css3新特性transition初体验

小彭的前端成长日记丶

已于 2022-03-22 16:42:00 修改

阅读量302

点赞数

于 2022-03-22 16:40:42 首次发布

本文链接：https://blog.csdn.net/qq_60248719/article/details/123664677

版权

html5

项目中有个需求：点击章节时展开小节，直接展示出来肯定体验不太好，其实之前也做过类似的，但是是用translate实现的，效果不太好。这次尝试下transition，话不多说直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3 transition</title>
	</head>
	<style type="text/css">
		.open{
			max-height: 0;
			width: 500px;
			background: linear-gradient(#fff,blue,purple);
			transition-property: max-height;
			transition-duration: 3s;
			transition-delay: 0;
			transition-timing-function: linear;
		}
		.open.show{
			max-height: calc(100vh);
		}
		.open.hide{
			max-height: 0;
		}
	</style>
	<body>
		<button type="button" id="btn">打开/关闭</button>
		<div id="box" class="open">
			<div style="height: 400px;"></div>
		</div>
	</body>
	<script type="text/javascript">
		let btn = document.getElementById('btn')
		let box = document.getElementById('box')
		btn.addEventListener('click',_=>{
			if(box.className.includes('show')){
				box.className = 'open hide'
			}else{
				box.className = 'open show'
			}
		})
	</script>
</html>

因为内容的高度是不确定的，所有height不得行，搜了下说有max-height，这样就实现了