手风琴隐藏显示动画怎么写
时间: 2023-10-02 17:14:01 浏览: 45
要实现手风琴式的隐藏显示动画,可以使用CSS的过渡效果(transition)来实现。
HTML代码:
```
<div class="accordion">
<button class="accordion-header">标题1</button>
<div class="accordion-panel">
<p>内容1</p>
</div>
<button class="accordion-header">标题2</button>
<div class="accordion-panel">
<p>内容2</p>
</div>
<button class="accordion-header">标题3</button>
<div class="accordion-panel">
<p>内容3</p>
</div>
</div>
```
CSS代码:
```
.accordion {
border: 1px solid #ccc;
border-radius: 5px;
}
.accordion-header {
background-color: #eee;
border: none;
outline: none;
padding: 10px;
width: 100%;
text-align: left;
cursor: pointer;
font-weight: bold;
}
.accordion-panel {
padding: 10px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.accordion-panel.show {
max-height: 1000px;
transition: all 0.3s ease-in-out;
}
```
JavaScript代码:
```
const accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(header => {
header.addEventListener('click', () => {
const panel = header.nextElementSibling;
panel.classList.toggle('show');
});
});
```
当用户点击手风琴的标题,对应的内容区域会缓慢地展开或收缩,而不是瞬间显示或隐藏。这里使用CSS的过渡效果来实现动画效果,通过设置max-height属性和overflow属性来实现收缩和展开,通过JavaScript来监听点击事件并动态地添加或删除CSS类来改变显示状态。