|
项目中有个需求：点击章节时展开小节，直接展示出来肯定体验不太好，其实之前也做过类似的，但是是用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，这样就实现了
|