[CSS 3] "Flip" animation for auto height 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Animation for auto height</title>
    <style>
        .btn {
            position: relative;
            border: none;
            outline: none;;
            background-color: #409eff;
            color: white;
            display: inline-block;
            line-height: 1;
            cursor: pointer;
            text-align: center;
            transition: 0.4s;
            font-size: 16px;
            padding: 10px 5px;
            border-radius: 20px;
            font-weight: 500;;
            width: 100px;
            border-radius: 4px;
        }
        .btn:hover {
            background-color: #66b1ff;
        }
        .content {
            width: 200px;
            border-radius: 5px;
            background: #007bff;
            color: white;
            line-height: 1.5;
        }
        .inner {
            padding: 20px
        }
        .details {
            position: absolute;
            left: 0;
            top: 100%;
            overflow: hidden;
            padding-top: 0.2em;
            height: 0;
        }
    </style>
  </head>
  <body>
    <button class="btn" id="btn">
        Hover
        <div class="details">
            <div class="content">
                <div class="inner">
                    here is lot of text \r\n
                    here is lot of text \r\n
                    here is lot of text \r\n
                    here is lot of text \r\n
                    here is lot of text \r\n
                    here is lot of text \r\n
                    here is lot of text \r\n
                    here is lot of text \r\n
                    here is lot of text \r\n
                    here is lot of text \r\n
                    here is lot of text \r\n
                    here is lot of text \r\n
                </div>
            </div>
        </div>
    </button>
    <script>
        const details = document.querySelector('.details');
        const btn = document.getElementById('btn');
        btn.onmouseenter = () => {
            details.style.height = 'auto';
            const {height} = details.getBoundingClientRect();
            details.style.height = 0;
            details.style.transition = '0.4s';
            details.getBoundingClientRect()
            details.style.height = `${height}px`;
        };
        btn.onmouseleave = () => {
            details.style.height = 0;
        };
    </script>
  </body>
</html>

posted @ 2025-02-10 00:39  Zhentiw  阅读(15)  评论(0)    收藏  举报