javascript - <div> 间接更改大小时不会触发过渡

Question

我的站点中有一个部分显示了四个不同的促销缩略图。

有一个信息 div 显示有关促销的更多信息。

Thumbs 有一个 onclick，它调用 javascript 中的一个函数来更新信息 div 中当前显示的文本。

我在 CSS 中声明我希望信息 div 有一个 0.3 的过渡，它已应用但不会从 div 中的文本更改触发。自然地，一些促销的内容比其他的更多。

我的想法是，我希望信息 div 在浏览促销事件时过渡高度，而不是高度的平缓变化。

该站点已上线并且可以正常工作。这是带有促销拇指的页面的直接链接。

链接>>>>>>> http://thezone.bg/promo <<<<<<<< 链接

我不想把它弄得太复杂，我的目标是找到一个简单的问题解决方案。

在此先感谢您为解决此问题付出的时间和精力。

<p class="roboto_big">Промоции</p>
<div class="image"><img src="uploads/images/NT-Test/promos.png" alt="" width="100%"></div>
<br>
<p class="roboto">Предлагаме многобройни промоции за всички наши клиенти. Възползвайте се от интернет и телевизия, които не са само услуги а начин на живот, на 110% с отстъпки и бонусите предлагани от Зоната.</p>
<hr class="horizontal">
<table style="border-spacing: 60px 0px;">
  <tbody>
    <tr>
      <td style="text-align: center;">
        <p class="roboto_medium">Колкото повече, толкова повече!</p>
        <img class='promo_thumb' onclick="more()" src="uploads/images/NT-Test/Router_Equalizer.png" alt="Промоция, 'Колкото повече толкова повече' ">        
      </td>
      <td style="text-align: center;">
        <p class="roboto_medium">Доведи <br> приятел</p>
        <img class='promo_thumb' onclick="month()" src="uploads/images/NT-Test/free-month2.png" alt="Промоция 'Доведи приятел'">
      </td>
      <td style="text-align: center;">
        <p class="roboto_medium">Лоялен <br> клиент</p>
        <img class='promo_thumb' onclick="client()" src="uploads/images/NT-Test/loyal-client.png" alt="Промоция 'Лоялен клиент'">
      </td>
      <td style="text-align: center;">
        <p class="roboto_medium">Диема <br> Екстра</p>
        <img class='promo_thumb' onclick="DiemaXtra()" src="uploads/images/NT-Test/diema-extra-the-zone.png" alt="Промоция 'Диема Екстра'">
      </td>
    </tr>
  </tbody>
</table>
<div id="promo_info" class="promo">
  <span id="promo_title" class="roboto_big_white" style="color: white;">Колкото повече, толкова повече!</span><hr class="horizontal" style="opacity: 0;">
  <p id="promo_content" class="roboto_white">Тази оферта е за всеки клиент подписал договор за услуга над 30Мб/с за целия срок на договора. Предоставяме ви 300 Мегабитов безжичен рутер за ползване през времето за което сте наш абонат. Настройката на рутера е безплатна и се извършва с характеристики, пожелани от Вас. Рутерът работи с новия 802.11n стандарт, поддържащ няколко антени на едно устройство което подобрява обсега на рутера, скоростта с която може да се прехвъря информация и броя на абонати свързани към домашната мрежа. Също така, ако включите телевизионен пакет Comfort TV/Mania TV получавате безплатно второ цифрово устройство !</p>
</div>

CSS ------------------------

div.promo {
  width: 90%;
  height: auto;
  background-color: #ba050a;
  background-image: url(http://thezone.bg/uploads/images/NT-Test/red_pane.png);
  background-repeat: no-repeat;
  margin: 0px auto;
  margin-top: 50px;
  padding: 10px;
  border: 2px solid #ba050a;
  border-radius: 5px 5px 0px 0px;
  box-shadow: 0px 0px 7px black;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.promo_thumb {
  cursor: pointer;
  position: relative;
  width: 100%;
}

Answer 1

您不能将 css 转换与 height: auto 一起使用。因此，解决方案是手动设置高度。

此函数将测量过渡前容器和内容的高度，然后测量过渡后内容的高度以获得差异，并将该差异添加到容器高度。从而触发转变。

function showPromotion(titleHTML, contentHTML) {
    var height = parseInt(getComputedStyle(info).height, 10);
    var start = content.scrollHeight;
    title.innerHTML = titleHTML;
    content.innerHTML = contentHTML;
    var diff = content.scrollHeight - start;
    info.style.height = (height + diff) + "px";
}