Question

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

<div>
    // Dynamic Content
</div>

div的最小高度为90px，但如果投放到div中的广告的高度为300px，我希望div能够设置动画（最好是css3过渡）到300px的新高度。

这可能吗？

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

Answer 1

您应该使用max-height代替min-height。使用max-height value t你的身高永远不会达到的高度，或者如果你想严格要求某个值。

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

请参阅Chris Jordan在另一个JSFiddle中提供的answer。

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

Answer 2

You try:

 div{
   height:auto
 }

Answer 3

使用默认div属性动态创建新的display:none。将广告附加到此新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 4

如果你能抓住“广告加载”事件并相应地为你的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>

您可以将max-height设置为300px或更高，这并不重要。

修改

根据您的评论。实际上你可以在GPT听一个事件。您可以在推送广告时添加它，如下所示：

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

现在我不确定你是如何做到的，但我认为你可以轻松地将它实现到你现有的代码中。

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

动态div的动画高度

4 个答案: