css 实现一个高度从0到auto的动画

transition 只支持数值，不支持auto属性。所以我们想实现要么使用js，要么使用 css 新属性。

2025-04-26 11:25:40

1257 热度

419 浏览

js实现方法就是监听移入移出，获取元素内部的高度，给它赋值，这里就不讲了。

css两个属性可以实现：

interpolate-size: allow-keywords;
height: calc-size(auto, size);

css 复制代码

.button {
    width: 30px;
    height: 20px;
    text-align: center;
    position: relative;
}

.content {
    position: absolute;
    top: 100%;
    left: 0px;
    background-color: pink;
    width: 100px;
    height: 0;
    overflow: hidden;
    transition: .3s;
    /* 属性一 */
    /* 就是这个属性，支持高度 0 到 auto */
    interpolate-size: allow-keywords;
}

.detail {
    padding: 20px;
}

.button:hover .content {
    height: auto;
    /* 属性二 */
    /* 这个属性也支持，用这个的话就不用上面的了 */
    height: calc-size(auto, size);
}

转载：转载请注明原文链接 - css 实现一个高度从0到auto的动画

0/50

暂无评论，快来抢沙发吧~

评论 (0)