css高度从0 到auto过渡

最新推荐文章于 2023-01-19 16:51:54 发布

LPLIFE

最新推荐文章于 2023-01-19 16:51:54 发布

阅读量1.2k

点赞数

分类专栏： css JavaScript

本文链接：https://blog.csdn.net/LPLIFE/article/details/103427123

版权

JavaScript 同时被 2 个专栏收录

76 篇文章 2 订阅

订阅专栏

css

28 篇文章 0 订阅

订阅专栏

最近朋友问了这样的问题：css高度从0 到auto过渡，上拉或者收起
主要利用
scrollHeight：scrollHeight
transition：transition
maxHeight：maxHeight

应用场景：点击收起、下拉然后进行过渡，开发中应该经常会遇到这样的需求
直接上代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #el {
        overflow: hidden;
        max-height: 0;
        background: darkgoldenrod;
        transition: max-height 0.5s;
    }
</style>
<body>
    <div class="trigger">
        <button onclick="myFunction()">确定</button>
        <div id="el">contentcontentcontentcontentcontentcontentcontent
            <p>
                    content
            </p>
            <p>
                    contentcontent
            </p>
            <p>
                    contentcontent
            </p>
        </div>
    </div>
</body>
<script>

    function myFunction() {
        let el = document.getElementById('el');
        let height = el.scrollHeight;
        if(el.style.maxHeight=='0px' || el.style.maxHeight=='') {
            el.style.maxHeight=`${height}px`;
        }else {
            el.style.maxHeight=`0px`;
        }
    }
</script>

</html>

LPLIFE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css高度从0 到auto过渡

最近朋友问了这样的问题：css高度从0 到auto过渡，上拉或者收起主要利用scrollHeight：scrollHeighttransition：transitionmaxHeight：maxHeight应用场景：点击收起、下拉然后进行过渡，开发中应该经常会遇到这样的需求直接上代码：<!DOCTYPE html><html lang="zh-cn">...
复制链接

扫一扫

专栏目录