Animate div container when adding new element to a list

Asked Mar 28 '18 at 08:31

Active Mar 28 '18 at 08:44

Viewed 21 times

I have a dynamic list of il inside a div.

The actual behavior is that when I add new elements to list, the div change the height suddenly and that's not so sexy.

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

And here's the 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;

}

I have tried transition but not working

edited Mar 28 '18 at 08:44

asked Mar 28 '18 at 08:31

infodev

4,673
17
65
138

1

@AhsN we don't need to specify all, by default it's all ... so specifying `0.3s` is enough – Temani Afif Mar 28 '18 at 08:35
you cannot have a transtion of height to auto value – Temani Afif Mar 28 '18 at 08:36
@TemaniAfif I just tested it, you are right, thnx – Ahs N Mar 28 '18 at 08:38

Animate div container when adding new element to a list

0 Answers0