MENU
方式一、方式二和方式三的公共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>
方式一、方式二和方式三的公共样式
.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;
}
方式一(style)
.detail {
transform-origin: center top;
transform: scaleY(0);
transition: 0.5s;
}
.btn:hover .detail {
transform: scaleY(1);
}
方式二(style)
.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;
}
方式四(style新属性)
效果
html
<div class="im">
testsdf
<br>
test
<br>
test
<br>
test
<br>
text
</div>
style
.im {
background-color: red;
overflow: hidden;
transition: all 0.3s;
height: 0;
height: calc-size(auto);
}
解析
谷歌提前测试W3C的css属性
2024年7月23日谷歌的版本是126
calc-size
估计要到谷歌的128版本才正式使用
126版本调试流程
1、进入设置页面
2、在地址栏中输入chrome://flags
3、接着在内容区的搜索框输入Web Platform
4、把Disabled
改成Enabled
5、右下角会出现Relaunch
按钮,点击重启浏览器即可
6、通过F12调试样式代码即可看到效果(分别勾选或取消勾选height)
calc-size
还未正式发布… …
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对象,其提供了元素的大小及其相对于视口的位置。