javascript - 在不使用过渡的情况下将html div的高度更改为顶部

Question

我需要制作坦克动画，根据液位，坦克(图像)的高度会发生变化。为此，我编写了如下 HTML 代码:

<div>
<img id='T1' style="height:0px;position:absolute">
</div>

现在我正在使用 ajax 从数据库中获取级别信息，并尝试使用 JavaScript 根据级别参数的值更改图像的高度。

  var level=response;
 document.getElementById('T1').height=level."px"; 

这是从上到下改变高度，但我想从下到上。使用 transform 反转 div 不起作用。过渡也不起作用，因为在这种情况下无法指定过渡时间。请给我一些建议。

Answer 1

使用 bottom: 0 将图像 absolute 定位到容器底部，以便它始终从底部开始并从那里延伸。

演示:

var level=14;
document.getElementById('T1').style.height = level+"px";

var changeLevel = function() {
    var level = document.getElementById('level').value;
    document.getElementById('T1').style.height = level+"px";
}

div {
    margin-top: 20px;
    position: relative;
    height: 50px;
    background-color: #eee;
}
#T1 {
    height: 0px;
    background-color: #909;
    width: 100%;
    position: absolute;
    bottom: 0;
}

<input id="level" type="text" placeholder="Level" />
<input type="button" value="Change Level" onclick="changeLevel()"/>

<div>
    <div id='T1'></div>
</div>