<div> 间接更改大小时不会触发转换

Question

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

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

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

我在 CSS 中声明我希望对信息 div 进行 0.3 转换，它已应用但不会因 [=36= 中的文本更改而触发].当然，有些宣传片的内容比其他宣传片多。

我的想法是，我希望信息 div 在查看促销活动时过渡高度，而不是高度的平缓变化。

该网站已上线并正常运行。这是带有促销大拇指的直接 link 页面。

LINK >>>>>>> http://thezone.bg/promo <<<<<<<< LINK

我不想把它说得太复杂，我的目标是简单地解决问题。

在此先感谢您花时间和精力解决这个问题。

<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

要详细说明 gilly 的评论，transition 效果需要一个 "from" 数字和一个 "to" 数字。您不能根据出现的文本总量来转换高度。（这实际上还需要考虑调整大小操作，也许还有其他一些情况）

我得到这样的东西的最好方法就是这个。没有伪代码，抱歉：

保存div的当前clientHeight。
将该高度作为样式手动应用到 div。
应用文本更改
保存 div 的 scrollHeight（总高度，忽略您的样式更改）。
在 setImmediate 或 setTimeout 调用中，将 div 的高度设置为第 3 步的高度。

如果用户调整浏览器大小并且高度需要在所有内容自动调整时更改，您可能需要调用类似的东西。

Answer 2

您不能将 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";
}

<div> 间接更改大小时不会触发转换

<div> transition not triggering when size is changed indirectly

html

javascript

css

transition