只在div show上工作的条件div的CSS高度动画

基础概念

CSS高度动画是指通过CSS的transition或animation属性来实现元素高度的变化效果。这种动画通常用于页面元素的展开和收起效果。

类型

Transition：用于在一定时间内平滑地过渡一个或多个CSS属性值的变化。
Animation：用于创建复杂的动画序列，可以控制动画的播放、暂停、重复等。

应用场景

菜单展开/收起：在导航栏中，点击菜单按钮时展开或收起子菜单。
卡片展开：在列表项中，点击某个项时展开详细信息。
轮播图：在图片轮播中，实现图片的平滑切换。

遇到的问题及解决方法

问题：只在`div show`上工作的条件`div`的CSS高度动画

原因：这种情况通常是因为CSS动画只对初始状态和最终状态进行了定义，而没有考虑到中间状态的变化。

解决方法：

使用max-height：通过设置max-height属性来实现动画效果，而不是直接设置height。这样可以避免高度计算不准确的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Height Animation</title>
    <style>
        .box {
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.5s ease;
        }
        .box.show {
            max-height: 200px; /* 设置一个足够大的值 */
        }
    </style>
</head>
<body>
    <button onclick="toggleBox()">Toggle Box</button>
    <div class="box" id="box">
        <p>This is some content inside the box.</p>
    </div>

    <script>
        function toggleBox() {
            const box = document.getElementById('box');
            box.classList.toggle('show');
        }
    </script>
</body>
</html>

使用JavaScript动态计算高度：在动画开始前，通过JavaScript动态计算元素的高度，并应用到CSS中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Height Animation</title>
    <style>
        .box {
            overflow: hidden;
            height: 0;
            transition: height 0.5s ease;
        }
        .box.show {
            height: auto; /* 使用auto让浏览器自动计算高度 */
        }
    </style>
</head>
<body>
    <button onclick="toggleBox()">Toggle Box</button>
    <div class="box" id="box">
        <p>This is some content inside the box.</p>
    </div>

    <script>
        function toggleBox() {
            const box = document.getElementById('box');
            if (box.classList.contains('show')) {
                box.style.height = '0';
            } else {
                box.style.height = box.scrollHeight + 'px'; // 动态计算高度
            }
            box.classList.toggle('show');
        }
    </script>
</body>
</html>