CSS div 展開(kāi)動(dòng)畫(huà)是網(wǎng)頁(yè)設(shè)計(jì)中比較流行的元素之一。它通常用于實(shí)現(xiàn)菜單展示、列表詳情等功能。對(duì)于這種動(dòng)畫(huà)效果的實(shí)現(xiàn)，我們可以使用 CSS3 的 transition 和 transform 屬性。

/* 定義 DIV 展開(kāi)前的狀態(tài) */
.anim-div {
height: 0; /* 高度為 0 */
overflow: hidden; /* 隱藏溢出部分 */
transition: all 1s ease-in-out; /* 定義過(guò)渡效果 */
}
/* 定義 DIV 展開(kāi)后的狀態(tài) */
.anim-div.show {
height: auto; /* 高度自動(dòng) */
transition: all 1s ease-in-out; /* 定義過(guò)渡效果 */
}

在上述代碼中，我們首先定義了一個(gè) .anim-div 類(lèi)，這個(gè)類(lèi)表示一個(gè)高度為 0，且溢出部分被隱藏的 div 元素。同時(shí)，我們?cè)O(shè)置了 transition 屬性，這個(gè)屬性表示該元素的所有屬性改變都會(huì)有 1s 的過(guò)渡時(shí)間，并且過(guò)渡效果為 ease-in-out。

接下來(lái)，我們定義了另一個(gè) .anim-div.show 類(lèi)，這個(gè)類(lèi)表示 div 元素展開(kāi)后的狀態(tài)。我們?cè)O(shè)置了 height 屬性為 auto，這意味著該元素的高度將自動(dòng)調(diào)整到合適的大小。同時(shí)，我們也定義了 transition 屬性，表示元素屬性的改變同樣有 1s 的過(guò)渡時(shí)間，并且過(guò)渡效果為 ease-in-out。

// JavaScript 實(shí)現(xiàn) div 展開(kāi)效果
document.getElementById("trigger").addEventListener("click", function() {
document.getElementById("anim-div").classList.toggle("show");
});

為了實(shí)現(xiàn)點(diǎn)擊事件后 div 展開(kāi)效果，我們需要使用 JavaScript 代碼。在上述代碼中，我們首先獲取了一個(gè) ID 為 trigger 的元素，并使用 addEventListener 方法為其注冊(cè)了一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)。接下來(lái)，我們使用了 classList.toggle 方法，實(shí)現(xiàn)了 div 元素在 show 和 hide 狀態(tài)之間的切換。

需要注意的是，該方法在 IE9 及以下版本的瀏覽器中不支持。這時(shí)候，我們可以通過(guò)使用 classList.add 和 classList.remove 方法分別添加和移除 show 類(lèi)名，實(shí)現(xiàn)效果上的類(lèi)似替代。

綜上所述，CSS div 展開(kāi)動(dòng)畫(huà)是網(wǎng)頁(yè)設(shè)計(jì)中比較實(shí)用的元素之一。通過(guò)結(jié)合 transition，transform 和 JavaScript 代碼，我們可以輕松地實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的動(dòng)態(tài)展示和交互效果，提升用戶體驗(yàn)。