javascript - 絶対divで幅と高さを0にCSSトランジションが機能しない

Question

私の目的は、divを幅と高さ0に移行して、徐々にユーザーに見えないようにすることです。次の絶対配置divがあります。

<div id="main" style="width: 200px; height: 100px; left: 648px; top: 253px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearEl" class="x-clear" role="presentation"></div></div></div>

ユーザーが閉じる div を押すと、次の css クラスを「メイン」div にアタッチします。

.collapseRecommendation {


 -webkit-transition: all 1.0s ease-in-out;
  -moz-transition: all 1.0s ease-in-out;
  -o-transition: all 1.0s ease-in-out;
  transition: all 1.0s ease-in-out;
}

JavaScript (extjs) コードで、div の幅と高さを 0 に設定します。

 mainDiv.setStyle('width', '0px');
 mainDiv.setStyle('height', '0px');

また、期待どおりに機能する「メイン」divを左と上の位置に設定しました。

ただし、「メイン」divの高さと幅のみが0に設定されていますが、内部のdivサイズは変更されず、同じ場所に留まり、ユーザーに表示されるため、移行後は次のようになります:

<div id="main" style="width: 0px; height: 0px; left: 348px; top: 153px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearEl" class="x-clear" role="presentation"></div></div></div>

ご覧のとおり、内部 div のサイズは 200x150 のままです。また、oサイズにならなかった理由は何でしょうか？ありがとう