css3折叠面板动画

CSS3折叠面板动画让网页设计更有创意性，能够增加用户与网站的互动性，提升用户的使用体验。下面我们来学习一个基本的CSS3折叠面板动画。

首先，我们需要一个HTML结构，如下所示：

div class="accordion">
    div class="accordion-item">
    div class="accordion-item-header">
    标题1/div>
    div class="accordion-item-body">
    内容1/div>
    /div>
    div class="accordion-item">
    div class="accordion-item-header">
    标题2/div>
    div class="accordion-item-body">
    内容2/div>
    /div>
    div class="accordion-item">
    div class="accordion-item-header">
    标题3/div>
    div class="accordion-item-body">
    内容3/div>
    /div>
    /div>

其中，每个折叠面板由两部分组成，一个是标题部分，一个是内容部分。

接着，我们需要用CSS来书写动画效果样式，如下所示：

/*通过改变高度实现折叠动画*/.accordion .accordion-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease-out;
}
/*控制标题部分的样式，添加按钮效果*/.accordion .accordion-item-header {
    cursor: pointer;
    position: relative;
    padding: 16px;
    background-color: #f5f5f5;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #e7e7e7;
}
/*改变高度，让内容部分展开*/.accordion .accordion-item-body--visible {
    max-height: 500px;
}
/*改变箭头方向*/.accordion .accordion-item-header::after {
    content: '⬇';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
    transition: transform .25s ease-out;
}
/*展开箭头方向改变*/.accordion .accordion-item-body--visible + .accordion-item-header::after {
    transform: translateY(-50%) rotate(180deg);
}
    

最后，我们还需要JavaScript代码来实现点击标题部分展开和关闭内容部分的功能，如下所示：

const accordionItems = document.querySelectorAll('.accordion .accordion-item');
    accordionItems.forEach(item =>
{
    const header = item.querySelector('.accordion-item-header');
    const body = item.querySelector('.accordion-item-body');
    header.addEventListener('click', e =>
{
    body.classList.toggle('accordion-item-body--visible');
}
    );
}
    );
    

上述代码主要使用了CSS3动画、过渡效果和JavaScript代码实现的功能，让折叠面板具有更好的用户体验效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！