transition not triggering when size is changed indirectly

Question

I have a section in my site where four different promotion thumbs are displayed.

There is an info div that shows more info about the promotion.

Thumbs have an onclick that call a function in javascript that updates the current displayed text in the info div.

I have state in the CSS that I desire a 0.3 transition for the info div, it is applied but it does not trigger of from the change of text in the div. Naturally some promos have more content than others.

My idea with this is that I want the info div to transition height when looking thru promotions, instead of just flat change in height.

The site is live and works. Here is a direct link to the page with the promos thumbs.

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

I wouldn't like to sophisticate it too much, I aim for a simple solution to the problem.

I would like to thank in advance for your time and effort in solving this problem.

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

well if you could paste that info div code to show us what have you tried then it would be much helpful for us to give you solution — CY5, Nov 13 '15 at 18:45
I figured that a live version of the whole thing would be more helpful. I will post the source code if its easier. — Denislav Karagiozov, Nov 13 '15 at 19:00
You can't transition `height: auto`. http://stackoverflow.com/q/3508605/361684 — gilly3, Nov 13 '15 at 19:19
The height never changes, its always auto, so there is nothing to transition — chiliNUT, Nov 13 '15 at 19:21

score 1 · Accepted Answer · answered Nov 13 '15 at 22:20

You can't use css transitions with height: auto. So, the solution is to manually set the height.

This function will measure the height of the container and the content before the transition, then measure the height of the content after the transition to get the difference, and add that difference to the container height. Thus triggering the transition.

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

score 0 · Answer 2 · answered Nov 13 '15 at 19:26

To detail gilly's comment, transition effects require a "from" number, and a "to" number. You can't transition height based on the total amount of text appearing. (This would actually also need to account for resize operations, and perhaps some other cases)

The best way I've gotten something like this working is this. No pseudocode, sorry:

Save current clientHeight of div.
Manually apply that height to the div as a style.
Apply text change
Save the scrollHeight of the div (total height, ignoring your style change).
In a setImmediate or setTimeout call, set the div's height to be the height from step 3.

You may need to call something similar if the user resizes the browser and the height needs to change when everything auto-adjusts.

transition not triggering when size is changed indirectly

2 Answers2