Question

我的网站中有一个部分，其中显示了四个不同的促销拇指。

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

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

我在CSS中声明了我希望信息div的0.3转换，它被应用但不会触发div中文本的更改。当然，一些宣传片的内容比其他宣传片更多。

我的想法是，我希望信息div在通过促销查看时转换高度，而不仅仅是平面变化。

该网站已上线并正常运行。这是使用promos thumb的页面的直接链接。

LINK＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt; http://thezone.bg/promo＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt; 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

您无法使用height: auto的css转换。因此，解决方案是手动设置高度。

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

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";
}

Answer 2

要详细说明吉利的评论，transition效果需要“来自”号码和“至”号码。您无法根据显示的文本总量转换高度。（这实际上还需要考虑调整大小操作，也许还有其他一些情况）

我得到这样的工作的最好方法就是这样。没有伪代码，对不起：

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

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

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

2 个答案: