元素高度从0到auto的过渡效果

// js中元素高度从0到auto的过渡效果 transition只对具体的数值有效
container.addEventListener("mouseenter", () => {
    // 将目标元素的高度设置为auto
    el.style.height = "auto";
    const h = el.clientHeight;
    el.style.height = 0;
    // 浏览器的渲染原理 强制页面渲染
    requestAnimationFrame(() => {
        requestAnimationFrame(() => {
            el.style.height = h + "px";
            el.style.transition = "0.5s";
        });
    });
});

// 鼠标移出
container.addEventListener("mouseleave", () => {
	el.style.transition = "none";
});