コンテンツの変更による幅/高さの変化をアニメーション化する方法は？

Question

下の例では、ボタンをクリックすると、divにコンテンツが追加されます。私はdivが大きくなってアニメーション化したい。これは純粋なCSSで可能ですか？

$('#btn').on('click', function() { 
 
    $('#content').append("<p>Ab atque aut cumque dolor exercitationem officia, perferendis quis vel. Autem deserunt ea maiores quaerat quos temporibus! Aperiam dolorem dolores, eaque ex ipsam laborum minima nesciunt nulla porro quaerat vel?</p>"); 
 
});

#content { 
 
    background-color: yellow; 
 
    
 
    transition: width 1s, height 1s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="content"> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab cupiditate debitis dolores dolorum ea, eligendi ex, expedita illum incidunt ipsum itaque neque optio quisquam quo vel veniam voluptatem voluptatibus, voluptatum.</p> 
 

 
</div> 
 

 
<button id="btn">click me</button>

Answer 1

あなたは#contentにマスクラッパーを使用して、それにCSSトランジションを適用する必要があるとJavascriptの変化にそれは高さです。新しいコンテンツ（高さの変更）を追加するたびに#contentから新しい高さを取得する必要があります。

var $contentMask = $('#contentMask'); 
 
var contentBoxId = '#content'; 
 
var currentHeight = getCurrentHeight(contentBoxId); 
 
$contentMask.css('height', currentHeight); 
 

 
$('#btn').on('click', function() { 
 
    $(contentBoxId).append("<p>Ab atque aut cumque dolor exercitationem officia, perferendis quis vel. Autem deserunt ea maiores quaerat quos temporibus! Aperiam dolorem dolores, eaque ex ipsam laborum minima nesciunt nulla porro quaerat vel?</p>"); 
 
    currentHeight = getCurrentHeight(contentBoxId); 
 
    $contentMask.css('height', currentHeight); 
 
}); 
 

 
function getCurrentHeight(selector) { 
 
return $(selector).height(); 
 
}

#content { 
 
    background-color: yellow; 
 
} 
 
#contentMask { 
 
    overflow: hidden; 
 
    transition: height 1s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="contentMask"> 
 
    <div id="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab cupiditate debitis dolores dolorum ea, eligendi ex, expedita illum incidunt ipsum itaque neque optio quisquam quo vel veniam voluptatem voluptatibus, voluptatum.</p> 
 
    </div> 
 
</div> 
 

 
<button id="btn">click me</button>

あなたはjsfiddleでも、それを見ることができます。https://jsfiddle.net/iamgutz/fsagbLn9/