如何解决元素未定义属性时无法触发CSS过渡动画的问题？

问题代码 #

JavaScript #

var c = document.getElementById('container');

function expand() {
    c.style.maxHeight = ~~(Math.random() * 50 + 50) + 'px'; // 动态值，无法用静态CSS动画
}

function shrink() {
    c.style.maxHeight = '0px';
}

CSS #

.container {
    transition: max-height 1s ease;
    border: 1px solid #000;
    overflow: auto;
}

HTML #

<div id="container" class="container">Hello, World!<br />Hello, World!<br />Hello, World!<br />Hello, World!<br />Hello, World!<br /></div>

<input type="button" onclick="expand()" value="Expand" />
<input type="button" onclick="shrink()" value="Shrink" />

问题描述 #

首次点击「Shrink」按钮时，容器会瞬间收缩到0px高度，没有过渡动画。原因是元素初始状态下未在style属性中设置maxHeight，CSS过渡无法获取起始参数；但点击任意按钮后，后续的动画就能正常运行。

需求是：不想用setTimeout和lambda函数这种复杂的预设属性方案，且无法修改第三方代码中的元素style属性，如何正确实现初始收缩的动画？

解决方案 #

方案1：CSS预设初始maxHeight（推荐） #

直接在.container的CSS里设置max-height为元素默认的实际高度，或者用fit-content让浏览器自动匹配初始高度：

.container {
    transition: max-height 1s ease;
    border: 1px solid #000;
    overflow: auto;
    max-height: fit-content; /* 现代浏览器支持，自动匹配元素内容高度 */
    /* 如果要兼容旧浏览器，可以手动设为元素初始实际高度，比如示例中是120px左右 */
    /* max-height: 120px; */
}

这样首次点击Shrink时，就能从预设的max-height平滑过渡到0px，完全不需要JS额外处理。

方案2：JS初始化时设置计算高度（不修改CSS的情况） #

如果不能修改CSS，就在DOM加载完成后，用getComputedStyle获取元素的实际计算高度，直接设置为初始maxHeight，无需异步操作：

var c = document.getElementById('container');

// DOM就绪时初始化maxHeight
window.addEventListener('DOMContentLoaded', function() {
    const realHeight = window.getComputedStyle(c).height;
    c.style.maxHeight = realHeight;
});

function expand() {
    c.style.maxHeight = ~~(Math.random() * 50 + 50) + 'px';
}

function shrink() {
    c.style.maxHeight = '0px';
}

这个方法给元素初始状态的style.maxHeight赋值了明确的起始值，首次点击Shrink时过渡动画就能正常触发。

原理说明 #

CSS过渡动画需要明确的起始值和结束值才能生效。初始状态下元素的style.maxHeight为空，浏览器无法确定过渡的起点，所以会直接跳转到目标值。通过CSS预设或JS初始化设置明确的初始max-height，就能给过渡提供完整的参数，解决首次无动画的问题。

内容的提问来源于stack exchange，提问作者Wolfgang Amadeus