transitionが効きません

Question

前提・実現したいこと

JavaScriptで設定したtransitionが効きません
原因はわかっています
height="auto"にすると効きません
ですがautoは外せません
class名で定義とかはしたくないです
どうしたらいいでしょうか

該当のソースコード

効かない例

<script>
window.onload=function(){
div=document.createElement("div");
div.id="a";
div.style.width="100px";
div.style.height="100px";
div.style.background="red";
div.style.transition = "all 0.5s ease-in-out";
div.style.overflow="hidden";
document.body.appendChild(div);

div2=document.createElement("div");
div2.style.width="100px";
div2.style.height="200px";
div2.style.background="blue";
div2.style.overflow="hidden";
div.appendChild(div2);
}
</script>

<input type="button" value="a" onclick="a.style.overflow='auto';a.style.height='auto'">

該当のソースコード

効く例

<script>
window.onload=function(){
div=document.createElement("div");
div.id="a";
div.style.width="100px";
div.style.height="100px";
div.style.background="red";
div.style.transition = "all 0.5s ease-in-out";
div.style.overflow="hidden";
document.body.appendChild(div);

div2=document.createElement("div");
div2.style.width="100px";
div2.style.height="200px";
div2.style.background="blue";
div2.style.overflow="hidden";
div.appendChild(div2);
}
</script>

<input type="button" value="a" onclick="a.style.overflow='auto';a.style.height='300px'">

Answer 1

事前にautoの時の高さを取得しておく。

let h;
window.onload=function(){
  div=document.createElement("div");
  div.id="a";
  div.style.width="100px";
  div.style.background="red";
  div.style.transition = "all .5s ease-in-out";
  document.body.appendChild(div);

  div2=document.createElement("div");
  div2.style.width="100px";
  div2.style.height="200px";
  div2.style.background="blue";
  div2.style.overflow="hidden";
  div.appendChild(div2);
  
  div.style.overflow='auto';
  div.style.height='auto';
  h = div.offsetHeight + 100;  
  div.style.height="100px";
  div.style.overflow="hidden";
}
function slidedown(){
  a.style.height='100px';
  a.style.height= h + 'px';
}

<input type="button" value="a" onclick="slidedown()">

Comments

[noritamat]

ばっちり動きました！！
ありがとうございますです

Answer 2

div.style.height="100px";

これを div.style.maxHeight="100px"; に、

a.style.height='auto'

これを a.style.maxHeight='100vh' (100vhは auto のときの高さを超えることが確実でできるだけ小さい値) にします。
'100vh'に向かってアニメーションするので、正確にautoのときの高さにアニメーションする場合とは多少タイミングがずれます。厳密なアニメーションが必要なら、JavaScriptでautoの高さをなんとか計算しておく必要があります。

Comments

[noritamat]

<script>
window.onload=function(){
div=document.createElement("div");
div.id="a";
div.innerText="a";
div.style.width="100px";
div.style.maxHeight="100px";
div.style.background="red";
div.style.transition = "all 0.5s ease-in-out";
div.style.overflow="hidden";
document.body.appendChild(div);

div2=document.createElement("div");
div2.style.width="100px";
div2.style.height="200px";
div2.style.background="blue";
div.appendChild(div2);
}
</script>

<input type="button" value="a" onclick="a.style.overflow='auto';a.style.maxHeight='100vh'">

上記のようにしたところ何も動かなくなってしまいました
ブラウザFirefox

[int32_t]

「何も動かなく」とは具体的にどういう状態でしょう? 画面に青い四角が現れない? 四角は現れるけど、ボタンを押しても何も起きない?

[noritamat]

四角は現れるけど、ボタンを押しても何も起きないです