コンテナから要素を削除したときにコンテナdivの新しい高さにアニメーション化する

Question

クリックしたときにdivからいくつかの要素を削除するためにjQueryでフィルタを作成しました。 opacity:0とvisibilty:hiddenを使用しているため、これらの要素がフィルタリングされるときにこれらの要素にフェードアニメーションがあります。フェードアニメーションの後、私はdisplay:noneを使ってdivから削除します。再度フィルタリングされない場合は、display:blockに設定され、opacity:1に設定すると再表示されます。

display:noneを使用してdivの内容を「削除」すると、コンテナdivの高さがすぐに新しい短い高さに設定されます。 私はコンテナdivを短くすることを瞬時に高さを変更するのではなく、アニメーションで新しい高さにしたいと思います。これまで私のソリューションでこれを行う方法はありますか？

transition: all 0.35s ease-inを追加するとコンテンツが削除されても機能すると思っていましたが、ただちに新しい高さに変更されます。 これは応答性の高いデザインなので、高さは固定されていません。画面の幅によって異なります。コードは以下のjsfiddleで見ることができ

...要素を表示/非表示するための表示プロパティで遊んでの https://jsfiddle.net/qv5vrz6c/

Answer 1

問題は、あなたがそれにCSSトランジションを適用することはできませんです。魔法のように

.web-box, .game-box{ 
    transition:all 0.5s; 
    height: 120px; 
    overflow: hidden; 
} 

.web-box.mp-hide, .game-box.mp-hide{ 
    height: 0; 
    transition:all 0.5s; 
} 

Live example