将新元素添加到列表时动画div容器

Question

我在div中有一个动态的il列表。

实际行为是当我向列表中添加新元素时，div会突然改变高度并且不那么性感。

<div class="contner">
   <div class="toggle-area">
     input + dynamic list
   </div>
</div>

这是 CSS ：

.contner {
 position: relative;
 vertical-align: middle;
 min-height: 242px;
 width: 604px;
 padding-top:10px;
 background-color: #FFFFFF;
 box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
 margin: 40px auto;
 padding-bottom: 12px;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;

}

我尝试了transition但没有工作