请用css3 动画的形式当点击时列表以动画的形式展开
时间: 2024-05-03 18:22:52 浏览: 4
以下是一个基本的示例,当点击按钮时,列表会以动画的形式展开:
HTML代码:
```
<button id="toggle-btn">展开列表</button>
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
```
CSS代码:
```
#list {
height: 0;
overflow: hidden;
transition: height 0.5s ease;
}
#list li {
opacity: 0;
transition: opacity 0.5s ease;
}
#list.active {
height: auto;
}
#list.active li {
opacity: 1;
}
```
JavaScript代码:
```
const toggleBtn = document.getElementById('toggle-btn');
const list = document.getElementById('list');
toggleBtn.addEventListener('click', function() {
list.classList.toggle('active');
});
```
在CSS中,我们将列表的高度设置为0,并使用`overflow: hidden`隐藏其内容。我们还为列表项设置了一个`opacity: 0`,以便在动画期间逐渐显示它们。
在`#list.active`规则中,我们将列表的高度设置为`auto`,以便其内容可以完全显示。我们还将列表项的`opacity`设置为1,以便它们可以通过动画逐渐显示出来。
在JavaScript中,我们使用`classList.toggle()`方法在按钮上添加和删除`active`类,以触发列表展开和关闭的动画效果。