CSS3手風(fēng)琴效果制作指南

在CSS3中，我們可以利用過渡（transition）和變換（transform）屬性來制作手風(fēng)琴效果，以下是一些詳細(xì)的步驟：

1、HTML結(jié)構(gòu)：我們需要一個(gè)HTML元素來承載手風(fēng)琴的內(nèi)容，我們可以使用一個(gè)簡單的div元素，并在其中放置我們的內(nèi)容。

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-button">標(biāo)題1</button>
        <div class="accordion-content">內(nèi)容1</div>
    </div>
    <div class="accordion-item">
        <button class="accordion-button">標(biāo)題2</button>
        <div class="accordion-content">內(nèi)容2</div>
    </div>
    <!-- 更多項(xiàng) -->
</div>

2、CSS樣式：我們需要為這些元素添加一些樣式，我們需要設(shè)置手風(fēng)琴的樣式，然后設(shè)置每個(gè)手風(fēng)琴項(xiàng)的樣式。

.accordion {
    width: 200px;
    height: 400px;
    border: 1px solid #000;
    border-radius: 5px;
    overflow: hidden;
}
.accordion-item {
    width: 100%;
    height: 0;
    border-top: 1px solid #000;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    transition: height 0.5s;
}
.accordion-item:first-child {
    height: auto;
}

3、JavaScript交互：我們需要添加一些JavaScript代碼來處理手風(fēng)琴的交互，我們將使用addEventListener來監(jiān)聽按鈕的點(diǎn)擊事件，并在點(diǎn)擊時(shí)切換手風(fēng)琴項(xiàng)的高度。

const accordionItems = document.querySelectorAll('.accordion-item');
const accordionButtons = document.querySelectorAll('.accordion-button');
let currentItem = 0;
let isCollapsing = true; // 初始狀態(tài)為折疊狀態(tài)
let transitionDuration = 0.5; // 過渡時(shí)間（秒）
let itemHeight = accordionItems[0].offsetHeight; // 獲取初始高度
let buttonHeight = accordionButtons[0].offsetHeight; // 獲取按鈕高度
let contentHeight = itemHeight - buttonHeight; // 計(jì)算內(nèi)容高度
let maxHeight = contentHeight * accordionItems.length; // 計(jì)算***大高度
let currentHeight = itemHeight; // 當(dāng)前高度
let targetHeight = isCollapsing ? itemHeight : maxHeight; // 目標(biāo)高度
let transitionStyle =height ${transitionDuration}s ${isCollapsing ? 'linear' : 'ease-out'}; // 過渡樣式字符串
let transitionEndEvent = new Event('transitionend'); // 過渡結(jié)束事件對(duì)象
let transitionEndListener = function() { // 過渡結(jié)束時(shí)的回調(diào)函數(shù)
    if (isCollapsing) { // 如果正在折疊，則重置高度并準(zhǔn)備下一次折疊操作。
        currentItem++; // 移動(dòng)到下一個(gè)項(xiàng)目，如果到達(dá)末尾，則重置到***個(gè)項(xiàng)目。
        if (currentItem >= accordionItems.length) { currentItem = 0; } // 重置到***個(gè)項(xiàng)目。
        isCollapsing = true; // 準(zhǔn)備下一次折疊操作。
        currentHeight = itemHeight; // 重置當(dāng)前高度。
        targetHeight = itemHeight; // 重置目標(biāo)高度。
        this.style.height = currentHeight + 'px'; // 設(shè)置當(dāng)前高度，這將觸發(fā)過渡，然后在下一次點(diǎn)擊時(shí)，高度將切換到目標(biāo)高度，這樣，手風(fēng)琴效果就可以循環(huán)播放了。} else { // 如果正在展開，則重置高度并準(zhǔn)備下一次展開操作，isCollapsing = false; // 準(zhǔn)備下一次展開操作，currentHeight = itemHeight; // 重置當(dāng)前高度，targetHeight = maxHeight; // 重置目標(biāo)高度，this.style.height = currentHeight + 'px'; // 設(shè)置當(dāng)前高度，這將觸發(fā)過渡，然后在下一次點(diǎn)擊時(shí)，高度將切換到目標(biāo)高度，這樣，手風(fēng)琴效果就可以循環(huán)播放了。} // 重置過渡樣式字符串和事件對(duì)象，transitionStyle =height ${transitionDuration}s ${isCollapsing ? 'linear' : 'ease-out'}; transitionEndEvent = new Event('transitionend'); // 添加過渡結(jié)束時(shí)的回調(diào)函數(shù)，this.addEventListener('transitionend', transitionEndListener); // 移除過渡結(jié)束時(shí)的回調(diào)函數(shù)，this.removeEventListener('transitionend', transitionEndListener); // 更新按鈕文本，if (isCollapsing) { this.innerHTML = '標(biāo)題1'; } else { this.innerHTML = '標(biāo)題2'; } // 更新項(xiàng)目內(nèi)容，if