高さ：100pxから自動の間のCSSトランジションの問題

Question

固定高さのdivには、含まれるより多くの内容を含む要素が含まれています。 非アクティブ状態（マウスが上に乗っていない状態）の場合、このdivの高さは100pxになり、コンテンツの下端が表示されます。

このdivがホバーされていると、内部のすべてのコンテンツがスライドして表示されます。私はこれを達成するために多くの方法を試してきました。とbottom宣言を適用し、max-heightを使用し、他の方法を使用しました。
NB：内部の内容が不明であるか、高さが変動している

しかし、私の方法のすべてがこれまでのところ、必要な効果を生み出すことができませんでした。ここで

私の方法のいずれかのリンクです：
http://jsfiddle.net/fLuHL/
それがダウンするのではなく、アップスライド。

Answer 1

私はCSSにtopプロパティを追加updated fiddle here

これはあなたが後にしているものであれば一定ではないんだけど、...。

Answer 2

移行では高さ= autoを考慮しないため、通常はtranslateYを使用して同じ効果が得られます。ここで

コードは次のとおりです。http://jsfiddle.net/5oL3gf7n/

私だけにあなたのコードのCSSを変更：

.post-container { 
display: block; 
height: auto; 
position: relative; 
margin-top: 0; 
z-index: 496; 
transition: transform .5s; 
    -moz-transition: transform .5s; 
    -webkit-transition: transform .5s; 
    -o-transition: transform .5s; 
transform: translateY(calc(100px - 100%)); 
} 

.text {       
background-color: #666 !important; 
padding: 20px; 
} 

.post-container:hover { 
transform: translateY(0); 
}