无高度盒子实现transtion过渡效果
无高度盒子实现transtion过渡效果
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
transition: all 3s ease;
background-color: #f1f1f1;
max-height: 0;
overflow: hidden;
}
.content {
}
.wrap:hover .container {
box-sizing: border-box;
max-height: 400px;
}
</style>
</head>
<body>
<div class="wrap">
<p>Hover over me!</p>
<div class="container">
<div class="content">
<p>This is some content inside the container.</p>
<p>This is some content inside the container.</p>
<p>This is some content inside the container.</p>
<p>This is some content inside the container.</p>
</div>
</div>
</div>
</body>
</html>
