最大高度动画

最新推荐文章于 2022-04-11 10:32:08 发布

rodgers VV

最新推荐文章于 2022-04-11 10:32:08 发布

阅读量202

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/William526/article/details/86711235

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<style>
        .a{
            max-height:0;
            background:red;
            overflow: hidden;
            transition: all linear 5s;
        }
        .b{
            height:200px;
            background:blue;
        }

    </style>
</head>
<body>
    <button>点我试试</button>
    <div class="a">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero tempore laboriosam natus quae fuga nesciunt itaque fugit voluptas ratione eos beatae ea repellendus modi autem accusamus molestiae, corrupti saepe numquam.</div>
    <div class="b">222</div>
</body>
<script>
    document.getElementsByTagName("button")[0].onclick=function(e){
        document.getElementsByClassName("a")[0].style.maxHeight=`1000px`;    //给个最大高度就会出现动画
    }
</script>

但是，使用此方法也有一点要注意，即虽然说从适用范围讲，max- height 值越大使用
场景越多，但是，如果 max-height 值太大，在收起的时候可能会有“效果延迟”的问
题，比方说，我们展开的元素高度是 100 像素，而 max-height 是 1000 像素，动画时间
是 250 ms，假设我们动画函数是线性的，则前 225 ms 我们是看不到收起效果的，因为
max-height 从 1000 像素到 100 像素变化这段时间，元素不会有区域被隐藏，会给人动
画延迟 225 ms 的感觉，相信这不是你想看到的。
因此，我个人建议 max-height 使用足够安全的最小值，这样，收起时即使有延迟，也
会因为时间很短，很难被用户察觉，并不会影响体验

rodgers VV

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最大高度动画

&lt;style&gt; .a{ max-height:0; background:red; overflow: hidden; transition: all linear 5s; } .b{ height:200px; ...
复制链接

扫一扫