CSS - 多数の自動サイズコンテナのトランジション

Question

現在、生成されたコンテンツを表示するウェブページのコードを書いています。クラスblockという名前のメインコンテナには、それぞれcontainerという別のコンテナが保持されます。コンテナの内部には、objectという名前の複数の要素があります。

両方のコンテナの高さは内容に応じてheight: auto; CSS設定になっています。このサイトの視覚効果は、私が注目を集めることに非常に情熱的なものです。トランジションエフェクトを使用して、コンテナの高さをスムーズに変更できるようにしたいと思います。

コード/視覚的な観点からは、JSFiddleをご覧ください。

[新しいオブジェクトを追加]というラベルの付いたボタンをクリックすると、デフォルトの効果が表示されます。両方のコンテナの滑らかな高さの変更をどのように有効にしますか？

多くのありがとうございます。

Answer 1

CSSはauto値にアニメートできません。 JavaScriptを使用して、.block要素の最初の部分をheightに設定し、それぞれを.object要素として追加して更新する必要があります。ここでは例があります（それの粗さのための謝罪は、少しは時間に追われたそれは、少なくとも、正しい方向にあなたを指している必要があります。）：

var \t span=document.createElement("span"), 
 
\t block=document.querySelector(".block"), 
 
\t container=document.querySelector(".container"); 
 
span.classList.add("object"); 
 
block.style.height=container.offsetHeight+"px"; 
 
document.querySelector("body>span").addEventListener("click",function(){ 
 
    container.appendChild(span.cloneNode(0)); 
 
    block.style.height=container.offsetHeight+"px"; 
 
},0);

span { 
 
    position: absolute; 
 
    padding: 5px; 
 
    left: 5px; 
 
    top: 5px; 
 
    background-color: #fff; 
 
    border: 1px solid rgba(0, 0, 0, 0.15); 
 
    cursor: pointer; 
 
} 
 
.block { 
 
    position: absolute; 
 
    width: 360px; 
 
    background-color: rgba(255, 0, 255, 0.1); 
 
    left: 50%; 
 
    overflow: hidden; 
 
    top: 50%; 
 
    padding-bottom: 10px; 
 
    margin-left: -200px; 
 
    margin-top: -150px; 
 
    transition:height .25s; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: calc(100% - 40px); 
 
    height: auto; 
 
    min-height: 10px; 
 
    left: 20px; 
 
    top: 5px; 
 
    background-color: rgba(255, 0, 0, 0.15); 
 
    font-size: 0px; 
 
    padding-bottom: 10px; 
 
    transition: 0.25s; 
 
} 
 
.object { 
 
    position: relative; 
 
    width: 80px; 
 
    height: 80px; 
 
    margin: 5px; 
 
    display: inline-block; 
 
    background-color: #f0f; 
 
}

<div class='block'> 
 
    <div class='container'> 
 
    <span class='object'></span> 
 
    </div> 
 
</div> 
 
<span>Add new object</span>