点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 300px;
margin: auto;
overflow: hidden;
background-color: palegreen;
transition: 0.3s;
}
.box-item {
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<button class="operate-button">折叠</button>
<button class="add-button">追加</button>
<div class="box">
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
<div class="box-item">this is a text this is a text</div>
</div>
<script>
let operateButton = document.querySelector(".operate-button");
let addButton = document.querySelector(".add-button");
let box = document.querySelector(".box");
let tag = false;
// 监听过渡执行完毕
box.addEventListener("transitionend", () => {
console.log(tag);
if (!tag) {
box.style.removeProperty("height");
}
});
operateButton.addEventListener("click", () => {
if (tag) {
box.style.height = "auto";
const height = box.offsetHeight;
box.style.height = 0;
//下次重绘（下一帧）执行
requestAnimationFrame(() => {
box.style.height = height + "px";
});
operateButton.textContent = "折叠";
} else {
const height = box.offsetHeight;
box.style.height = height + "px";
//下次（下一帧）重绘执行
requestAnimationFrame(() => {
box.style.height = 0;
});
operateButton.textContent = "展开";
}
tag = !tag;
});
addButton.addEventListener("click", () => {
const cloneLiItem = document.querySelector(".box-item").cloneNode(true);
box.appendChild(cloneLiItem);
});
</script>
</body>
</html>