Animate height of dynamic div - css

Question

I'd like to make the height of a div animate depending on the dynamic ad that is served inside.
<div>
// Dynamic Content
</div>
The div has a minimum height of 90px, however if the ad served into the div has a height of 300px, I want the div to animate (css3 transition preferably) to the new height of 300px.
Is this possible?
At the moment the div just jumps to the new height, and the main content of the page jumps down with it. I'd just like this to be a smooth transition.

Answer 1

You should use max-height instead of min-height. Use max-height value t something your height will never reach, or if you want to strict hieght to some value.
And use transition with max-height and ease-in.
See JSFiddle provided in another answer by Chris Jordan.
<div class="imagediv">
// Dynamic Content
</div>
//CSS
#imageDiv {
max-height: 500px;
transition: max-height 0.25s ease-in;
}

Answer 2

If you can catch the "ad loaded" event and add a class to your div accordingly you can try setting the max-height of the div instead of height.
function addElement() {
var initialDiv = document.getElementsByClassName('yourDiv')[0];
var newdiv = document.createElement('div');
newdiv.setAttribute('style','height: 300px;');
initialDiv.classList.add('loaded');
newdiv.innerHTML = '<img src="http://placehold.it/300x300"/>';
initialDiv.appendChild(newdiv);
}
setTimeout(function(){
addElement();
}, 1000);
.yourDiv {
min-height: 90px;
width: 300px;
background-color: grey;
max-height: 90px;
transition: max-height 500ms ease-in;
overflow: hidden;
}
.yourDiv.loaded {
max-height: 300px;
transition: max-height 500ms ease-in;
}
<div class="yourDiv">
</div>
You can set the max-height to 300px or more, it doesn't really matter.
EDIT:
Based on your comment. There actually is an event you can listen to in GPT. You can simply add it when pushing the ads like this:
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
// slot has been rendered - do stuff
});
Now I'm not sure how you've done yours but I think you can implement this easily to your existing code.
A working example: https://jsfiddle.net/thepio/7tfdxw8f/

Answer 3

You try:
div{
height:auto
}

Answer 4

Create a new div dynamically with default display:none property. Append the ad to this new div and then append the new div to your original div. And you can show the new div with effect. Have a look below
$('button').click(function(){
$('.content').append('<div id="new" style="display:none;">1<br>1<br>3<br>4<br>1<br>3<br>4<br>1<br>3<br>4</div>');
$('#new').show(1000);
});
.content{
min-height:90px;
border:1px solid #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content"></div>
<button type="button">Click</button>