web前端之实现高度自动过渡功能、变形、grid栅格的特殊单位fr、getBoundingClientRect、offsetHeight

---

方式一、方式二和方式三的公共样式

.btn {
    position: relative;
    border: none;
    outline: none;
    background-color: #409eff;
    color: #ffffff;
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    transition: 0.1s;
    font-weight: 500;
    user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}

.btn:hover {
    background-color: #66b1ff;
}

.btn:active {
    background-color: #3a8ee6;
}

.btn:disabled {
    background-color: #66b1ff80;
    cursor: not-allowed;
}

.detail {
    position: absolute;
    left: 0;
    top: 100%;
    overflow: hidden;
    padding-top: 0.2em;
}

.content {
    width: 200px;
    border-radius: 5px;
    background-color: #007bff;
    color: #ffffff;
    line-height: 1.5;
    min-height: 0;
}

.inner {
    padding: 20px;
}

---

方式一

.detail {
    transform-origin: center top;
    transform: scaleY(0);
    transition: 0.5s;
}

.btn:hover .detail {
    transform: scaleY(1);
}

---

方式二

.detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s;
}

.btn:hover .detail {
    grid-template-rows: 1fr;
}

---

方式三(JavaScript)

JavaScript

const btn = document.querySelector('.btn');
const detail = document.querySelector('.detail');

btn.onmouseenter = function () {
    detail.style.height = 'auto';
    const { height } = detail.getBoundingClientRect();
    detail.style.height = 0;
    detail.style.transition = '.3s';
    detail.offsetHeight;
    detail.style.height = height + 'px';
}

btn.onmouseleave = function () {
    detail.style.height = 0;
    detail.style.transition = '.3s';
}

---

css

.detail {
    height: 0;
}

---

html

<div class="btn">
    <div>hover me</div>

    <div class="detail">
        <div class="content">
            <div class="inner">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur veniam nihil, repudiandae
                ratione vitae ipsa natus itaque ipsum deserunt consequuntur exercitationem nisi reiciendis debitis
                quam et quibusdam quos magni optio?
            </div>
        </div>
    </div>
</div>

---

offsetHeight

菜鸟教程

offsetHeight属性是一个只读属性，它返回该元素的像素高度，高度包含内边距(padding)和边框(border)，不包含外边距(margin)，是一个整数，单位是像素px。
通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话)，不包含:before或:after等伪类元素的高度。

对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。
如果元素被隐藏(例如：元素或者元素的祖先之一的元素的style.display被设置为none)，则返回0。
注意：要了解该属性，可以参阅CSS盒子模型。
提示：该属性通常与offsetWidth属性一起使用。
提示: 使用clientHeight和clientWidth属性返回元素的可见高度和宽度，仅包括内边距(padding)。
提示：元素添加滚动条，可以使用overflow属性。
这是一个只读属性。

---

MDN

HTMLElement.offsetHeight是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话)，不包含:before或:after等伪类元素的高度。
对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。
如果元素被隐藏(例如 元素或者元素的祖先之一的元素的style.display被设置为none)，则返回0
备注：这个属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用element.getBoundingClientRect()

---

getBoundingClientRect

W3CSHOOL

getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
getBoundingClientRect()方法返回的是拥有八个属性的DOMRect对象：
1、left
2、top
3、right
4、bottom
5、x
6、y
7、width
8、height
提示：已经完成的滚动也算在内。这意味着每次滚动位置更改时，矩形的边缘(top、left、bottom 以及 right)都会更改其值。

---

MDN

Element.getBoundingClientRect()方法返回一个DOMRect对象，其提供了元素的大小及其相对于视口的位置。