トランジションを使わずに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>

Answer 2

あなたがやろうとしているかを把握するために、この

#t1 { 
    position: absolute; 
    left: 0px; 
    bottom: 0px; 
} 

または

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

Answer 3

ハードのために、以下のCSSを追加することができます。リンクが役立つかもしれません。私が見ることができるのはスタイルだけです。高さは間違って書かれています。

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