css实现不确定内容的高度过渡

实现效果：鼠标悬浮按钮，高度过渡出现如图所示文本框

代码：

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .button {
            width: 70px;
            line-height: 40px;
            height: 40px;
            margin: 10px auto;
            border: 2px solid gold;
            background-color: rgb(87, 202, 11);
            border-radius: 5px;
            text-align: center;
            color: #fff;
            font-weight: bolder;
            display: block;
            cursor: pointer;
            box-sizing: border-box;
            position: relative;
        }
        .content {
            width: 400px;
            margin: 0px auto;
            line-height: 30px;
            background-color: cornflowerblue;
            color: #fff;
            font-size: 18px;
            font-weight: bolder;
            margin-top: 10px;
            border-radius: 25px;
            text-align: center;
            transition: 1s;
            height: 0px;
            overflow: hidden;
            /* 差值算法针对一些尺寸的关键字有作用，浏览器内部会将关键字计算出具体的数值，然后去实现过渡 */
            /* interpolate-size: allow-keywords; */
            /* 差值算法只针对数值有作用，这个是默认值，所以过渡效果也只针对数值才能产生效果 */
            /* interpolate-size: numeric-only; */
        }
        .content.active {
            /* 根据尺寸关键字算出实际尺寸，size则为实际尺寸，还可以在size上面操作，例如calc-size(auto, size + 10px) */
            height: calc-size(auto, size);
        }
    </style>
</head>
<body>
    <div class="button">
        展开详情
        <div style="position: absolute;top: 10px; left: 10px;">111</div>
    </div>
    <div class="content">
        <div></div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque, culpa unde est animi consequatur iste eum eius sunt odit officia laboriosam expedita officiis mollitia doloribus possimus recusandae corrupti. Tempora, distinctio!
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe voluptatem recusandae sapiente suscipit voluptate repudiandae vero in! Saepe, libero veritatis similique blanditiis explicabo voluptatum fuga dignissimos ratione quas! Molestias, itaque.
    </div>
    <script>
        var button = document.querySelector('.button');
        const content = document.querySelector('.content');
        // button.onmouseenter = () => {
        //     // 这两行代码完全只是为了算出内容展开后，元素的高度，好让高度从0到实际高度来实现过渡效果
        //     content.style.height = 'auto';
        //     const { height } = content.getBoundingClientRect();
    
        //     content.style.height = '0px';
        //     content.clientHeight; // 强制回流
        //     content.style.height = `${height}px`;
        // }
        // button.onmouseleave = () => {
        //     content.style.height = '0px';
        // }
        button.onmouseenter = () => {
            content.classList.add('active');
        }
        button.onmouseleave = () => {
            content.classList.remove('active');
        }
    </script>
</body>
</html>

思路一：height: 0；-》height: auto; 过渡只针对数值属性有效果，这种过渡效果无法出现。
思路二：max-height: 0；-》max-height: 1000px;这种有两个缺点，一个是不能完全保证内容高度最后不超过设置的1000px；第二就是过渡效果是从0-》1000，可能假设需要1s，但实际内容高度是500px的话，那么肉眼看起来的过渡时间只有0.5s；移出按钮时，从1000-》500这个过渡过程肉眼是不可见的，假设需要耗费0.5s，那么肉眼感受到的效果就是页面卡了0.5s才开始将内容收起来(文本框消失的过程)。总结就是移出效果会受到影响。
思路三：js设置height:auto算出内容实际高度，后立马设置高度为0，然后强制回流渲染，最后设置内容为实际高度，从而实现过渡。
思路四：使用interpolate-size，兼容性不好。

思路五：calc-size(auto, size)，兼容性不好