解决auto在CSS3动画中无法使用的问题_css3 transition鼠标挪上去出现,height由0到auto-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43263355/article/details/144770493

概要

本文通过一个弹出框高度由0逐渐变到指定的高度的例子，来说明如何解决auto在CSS3动画中无法使用的问题。

问题说明

我们希望实现一个效果，当输入框获得焦点的时候时候，出现一个自动提示的弹出框，弹出框的高度由0逐渐增长到指定高度。但是弹出框的高度不确定，因为在实际应用中，需要通过异步调用，从后台拿到数据再渲染弹出框的内容。

基本效果如下所示：
在这里插入图片描述

关键CSS代码（完整代码请参看附录）：

.auto-complete{
        height: 0;
        transition: all .5s linear;
}

button:hover + .auto-complete {
        height: auto;
}

上面的代码是无法实现的，因为动画中，渐变的过程，需要具体的数值，auto不是，所以我们实际看到的效果是弹出框一闪就出现了，没有渐变过程。

解决方案

方案1 通过设定max-height来绕过auto的问题

为了避免从后台拿到大量数据，我们可以将max-height 设置的很大，从而绕过auto。关键代码如下：

.auto-complete-popup {
        max-height: 0;
        transition: all .5s linear;
}

 input:focus + .auto-complete-popup {
        height: auto;
 }

这样做可以看到渐变效果，但是明显高度增长的要比预期快很多。原因是我们设置的渐变过程是高度从0增长到1000，消耗0.5秒，但是实际上弹出框的高度现在只有200px左右，所以实际上我们只看到了0.1s的动画。

方案2 通过设定scaleY来绕过auto的问题

我们通过CSS动画中的scaleY函数来实现，关键代码如下：

.auto-complete{
        transform: scaleY(0);
        transition: all .5s linear;
}

input:focus + .auto-complete-popup {
        transform: scaleY(100%);
}

这样做，基本可以达到高度渐变的效果，但是我们可以看到，在渐变过程中，弹出框的文字被压扁了。
在这里插入图片描述

方案3 通过JS将auto翻译成具体的数值，然后再进行渐变。

关键代码：

function handleFocus(){
    oPopup.style.height = "auto";
    const { height } = oPopup.getBoundingClientRect();
    oPopup.style.height = 0;
    oPopup.style.transition = "all .5s linear";
    oPopup.getBoundingClientRect();
    oPopup.style.height = height + "px";
}

function handleBlur(){
    oPopup.style.height = 0;
}

handleFocus是输入框获取焦点时候的处理事件；
首先将弹出框的高度设置为auto；
通过getBoundingClientRect方法获取布局树中计算的最终高度；
将弹出框高度设置为0；
开启渐变效果；
为保浏览器有足够时间开启证渐变效果，调用getBoundingClientRect，强制浏览器重绘；
将弹出框设置为已经计算好的正常高度；
在弹出框中选中的具体的内容，弹出框关闭。
在输入失去取焦点时候，将弹出框高度设置为0。

结论

方案1 基本无法满足要求，可以排除。方案2可以基本满足要求，如果用户并不在意文字被压扁的过程，方案2完全使用CSS实现，代价较低，可以作为首选。方案3完美解决了这个问题，但是涉及JS和CSS两块的代码调整，需要考虑代价。

附录

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="./index.js" defer></script>
</head>
<body>
    <div class="auto-complete">
        <input type="text" name="" id="">
        <div class="auto-complete-popup">
            <p>选择银行:</p>
            <ul>
                <li>中信银行</li>
                <li>招商银行</li>
                <li>光大银行</li>
                <li>华夏银行</li>
                <li>民生银行</li>
                <li>浦发银行</li>
                <li>兴业银行</li>
                <li>渤海银行</li>
            </ul>
        </div>
    </div>
</body>
</html>

SCSS代码：

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
.auto-complete{
    margin:20px auto;
    width:40%;
    height:auto;
    position: relative;
    input {
        width:200px;
        height: 30px;
        font-size: 18px;
    }

  /*   input:focus + .auto-complete-popup{
        height: auto;
        transform: scaleY(100%);
    }  */

    .auto-complete-popup {
        position: relative;
        width:200px;
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
        /* transition: all .5s linear; */
        height: 0;
       // transform: scaleY(0);
        overflow: hidden;
        p {
            padding: 20px;
            font-weight: 600;
        }
        ul {
           
            list-style: none;
            li {
                z-index: 9;
                padding:10px 20px;
                border-bottom: 1px solid #000;
                cursor: pointer;
                &:hover {
                    background-color: rgba(0, 0, 0, 0.2);
                    color:#fff;
                }
                &:last-child{
                    border-bottom: 0;
                }
            }
        }

    }
}

JS 代码：

const oInputArea = document.querySelector("div.auto-complete");
const oInput = oInputArea.querySelector("input");
const oPopup = oInputArea.querySelector("div.auto-complete-popup");
const oList = oInputArea.querySelector("ul");
oList.addEventListener("click", handleClick, false);
oInput.addEventListener("focus",handleFocus, false);
oInput.addEventListener("blur", handleBlur, false);

function handleFocus(){
    oPopup.style.height = "auto";
    const { height } = oPopup.getBoundingClientRect();
    oPopup.style.height = 0;
    oPopup.style.transition = "all .5s linear";
    oPopup.getBoundingClientRect();
    oPopup.style.height = height + "px";
}

function handleBlur(){
    oPopup.style.height = 0;
}

function handleClick(e){
    const oBank = e.target || e.srcElement;
    if (oBank.tagName != "LI"){
        return;
    } 
    oInput.value = oBank.innerText;
    oInput.blur();
}