Есть блок, который я хочу анимировать с помощью css
#confirm {
position: absolute;
width: 280px;
height: 0;
border: 1px grey solid;
background-color: #f9f0ff;
z-index: 1000;
display: inline-block;
border-radius: 6px;
transition: height 7s;
overflow: hidden;
padding: -1px;
text-indent: 0;
box-sizing: border-box;
#confirm.f-dropped {
height: 160px;
}
#confirm .content {
margin: 1em;
display: inline-block;
overflow: hidden;
}
}
По некоторому событию я средствами JS добавляю .f-dropped
Но анимация получается некрасивой... Вначале, когда высота блока небольшая, его содержимое сильно сдвинуто вверх... И потом опускается вниз. Я считаю, что красивее будет, когда содержимое блока не будет двигаться при анимации, а будет изменяться только его размер.
Вот пример.
http://jsbin.com/ricuco