<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test" style="width: 100px;background-color: red;">
<div>222</div>
</div>
<button id="btn">开始</button>
<script>
const btn = document.getElementById('btn')
const test = document.getElementById('test')
const { height: oldH } = test.getBoundingClientRect() // 获取初始状态
btn.onclick = function () {
test.innerHTML = `<div style="width: 100px;height: 100px;">lll</div>`
const { height: newH } = test.getBoundingClientRect() // 获取结束状态
// 执行动画
Promise.resolve().then(() => {
test.animate(
[{ height: oldH + 'px' }, { height: newH + 'px' }],
{
duration: 300,
}
);
})
}
</script>
</body>
</html>
