技术求助：如何让div高度从下到上而非从上到下变化

要实现div高度从下到上变化，只需调整CSS定位规则即可，无需修改JavaScript代码，具体修改如下：

修改后的CSS代码 #

.load {
  width: 550px;
  height: 0;
  background-color: red;
  position: absolute;
  bottom: 50px; /* 将top替换为bottom */
  z-index: -1;
  /* 移除transform: rotate(180deg)，无需翻转元素 */
}

原HTML代码保留 #

<div class="load"></div>

原jQuery代码保留 #

$(document).ready(function() {
  var animating = false;
  var isExpanded = false;

  $(document).on('keydown keyup', function(e) {
      if (e.keyCode === 38) { // 检测上箭头按键的按下/松开状态
          if (e.type === 'keydown' && !animating && !isExpanded) { // 按键按下且未展开时执行动画
              animating = true;
              $(".load").stop().animate({height: "510px"}, 2000, function() {
                  animating = false;
                  isExpanded = true;
              });
          } else if (e.type === 'keyup' && (isExpanded || animating)) { // 按键松开时执行收回动画
              $(".load").stop().animate({height: "0"}, 2000, function() {
                  animating = false;
                  isExpanded = false;
              });
          }
      }
  });
});

修改说明 #

• 把top: 50px改为bottom: 50px：绝对定位元素设置bottom属性后，元素底部会固定在距离父容器底部50px的位置，当高度从0增加到510px时，元素会向上延伸，自然实现从下到上的高度变化。
• 移除transform: rotate(180deg)：原旋转操作属于冗余处理，修改定位规则后无需翻转元素即可达到需求效果。

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