动态的动画高度 div

Question

我想根据内部投放的动态广告制作 div 动画的高度。

<div>
    // Dynamic Content
</div>

div 的最小高度为 90px，但是如果投放到 div 的广告高度为 300px，我希望 div 设置动画（css3 transition preferred) to the new height of 300px.

这可能吗？

此时div刚好跳到新的高度，页面的主要内容随之跳下。我希望这是一个平稳的过渡。

Answer 1

You try:

 div{
   height:auto
 }

Answer 2

使用默认 display:none 属性动态创建一个新的 div。将广告附加到这个新的 div，然后将新的 div 附加到您的原始 div。您可以 show 新的 div 生效。往下看

$('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>

Answer 3

如果您可以捕获 "ad loaded" 事件并将 class 添加到您的 div 中，您可以尝试设置 div 的 max-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>

您可以将最大高度设置为 300px 或更高，这并不重要。

编辑：

根据您的评论。实际上，您可以在 GPT 中收听一个事件。推广告的时候直接加上就可以了：

googletag.pubads().addEventListener('slotRenderEnded', function(event) {
  // slot has been rendered - do stuff
});

现在我不确定你是怎么做的，但我认为你可以很容易地在现有代码中实现它。

一个工作示例：https://jsfiddle.net/thepio/7tfdxw8f/

Answer 4

您应该使用 max-height 而不是 min-height。使用最大高度值 t 一些你的高度永远不会达到的东西，或者如果你想严格限制某个值。

并使用 transition 与 max-height 和 ease-in。

参见克里斯·乔丹的 JSFiddle provided in another answer。

<div class="imagediv">
    // Dynamic Content
</div>
//CSS
#imageDiv {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

动态的动画高度 div

Animate height of dynamic div

css

transition