如何设置absolute定位div实现固定底部且从顶部变高的动画？

要实现absolute定位的div固定在紫色底线、从顶部触发高度变化的动画，可以通过以下两种简洁方式实现：

方案一：使用CSS Transform（无需额外嵌套元素） #

核心思路是通过transform-origin: top将动画原点设置在顶部，结合scaleY()实现从顶部向下展开的效果，同时用bottom属性固定div的底部位置。

调整后的代码： #

CSS

.element{
    width: 40px;
    height: 60px; /* 这是div的最终高度，即紫色线到顶部的距离 */
    position: absolute;
    bottom: 0; /* 替换为紫色线对应的Y轴位置，比如bottom: 50px */
    transform: scaleY(0); /* 初始状态为高度0 */
    transform-origin: top; /* 动画从顶部开始 */
    transition: transform 1.0s ease-in-out;
    background-color: #你的颜色; /* 设置div的背景色 */
}

HTML

<div class="element"></div>

JavaScript

// 触发动画，让div从顶部展开至完整高度
element.style.transform = 'scaleY(1)';

方案二：嵌套内部填充元素（更灵活的样式控制） #

如果需要更复杂的内部样式，可以在外层div中嵌套一个填充元素，通过控制内部元素的高度实现动画，外层div负责固定底部位置并隐藏溢出内容。

调整后的代码： #

CSS

.element{
    width: 40px;
    height: 60px; /* 最终总高度 */
    position: absolute;
    bottom: 0; /* 替换为紫色线的Y轴位置 */
    overflow: hidden; /* 隐藏内部元素超出部分 */
}

.element__fill{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0; /* 初始高度为0 */
    background-color: #你的颜色;
    transition: height 1.0s ease-in-out;
}

HTML

<div class="element">
    <div class="element__fill"></div>
</div>

JavaScript

// 触发动画，让内部元素从顶部向下填充至满高度
const fillEl = document.querySelector('.element__fill');
fillEl.style.height = '100%';

内容的提问来源于stack exchange，提问作者gotiredofcoding