點擊折疊按鈕實現詳情展開關閉並增加動畫效果
1. 對需要展開的div設置css
.detail-collpase {
transition: all 0.3s;
height: 0px; //初始高度為0
overflow: hidden; // 要設置為hidden，不然內容會顯示出來
}
2. 通過js去設置高度來實現動畫效果
const nextElement = this.$refs['detail' + index][0] // 獲取el
if(open) {
nextElement.style.height = "auto"; // 高度設置為自適應
let targetHeight = window.getComputedStyle(nextElement).height; // 此時獲取元素高度並記錄
nextElement.style.height = '0px'; //將高度設置為0
setTimeout(() => {
nextElement.style.height = targetHeight; // 恢復高度，動畫效果出現
}, 20)
} else {
nextElement.style.height = '0px' // 關閉高度設置為0
}