<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
position: relative;
}
.nav {
width: fit-content;
padding: 5px 10px;
border-radius: 5px;
background-color: orange;
color: white;
cursor: pointer;
}
.nav:hover {
background-color: orangered;
}
.nav:hover ~ .content {
height: var(--height--);
}
.content {
position: absolute;
top: 40px;
width: 200px;
height: 0;
overflow: hidden;
background-color: skyblue;
transition: all 0.5s;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="nav">下拉</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto praesentium sunt ea alias at
cumque nostrum impedit eveniet, excepturi aliquid nesciunt ut. Nobis placeat excepturi
sapiente, dolorem quia perferendis aspernatur? Veniam asperiores illo qui optio rem
</div>
</div>
<script>
const el = document.querySelector('.content'),
height = el.scrollHeight;
el.style.setProperty('--height--', height + 'px');
</script>
</body>
</html>
html+css+js实现高度过渡效果
最新推荐文章于 2024-05-20 15:17:08 发布