css переходы не работают во время цикла

Question

На моем сайте у меня есть список таблиц, которые устанавливают кучу тренировок для спортсменов в определенные даты.

Я хочу добавить способ ввода, как они это сделали. Я бы хотел, чтобы он работал таким образом, чтобы при наведении или нажатии на тренировку div прокручивал вниз, показывая, что было достигнуто.

настоящее время у меня следующий код в то время цикла:

$sessTable .= '<table border = "1px solid black" style="width:100%; border-collapse: collapse"> 
         <tr> 
          <td colspan="2" style="background-color:#E8E8E8 ">' .$newDate. '' .$attendBtn. '</td> 
         </tr> 
         <tr> 
          <td><div style=" float:left" >' .$session. '</div>' .$editBtns. '</td> 
         </tr> 
        </table> 
        <div class="diary"> 
          testing the div theory.<br/> 
          to see if it<br/> 
          will slide up and down 

        </div>'; 

CSS-

.diary { 
    width: 100%; 
    height: 10px; 
    background: #FFF; 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
    transition: height 2s; 
    font-size:0px; 
} 

.diary:hover { 
    height: 300px; 
    font-size:12px; 
    background:#CCC 
} 

Казалось работать нормально, когда я попробовал его на один DIV, но когда я положил его в цикл while работает нормально, но, похоже, игнорирует начальное состояние .diary, а также просто переходит прямо в состояние зависания без перехода.

Мой вопрос в том, возможно ли это для нескольких div или есть лучший способ добиться того, что мне нужно.

Answer 1

Потому что вы установили transition только для height

.diary { 
 
    width: 100%; 
 
    height: 10px; 
 
    background: #FFF; 
 
    -webkit-transition: height 2s,background 2s;; 
 
    /* For Safari 3.1 to 6.0 */ 
 
    transition: height 2s,background 2s;; 
 
    font-size: 0px;overflow:hidden 
 
} 
 
.diary:hover { 
 
    height: 300px; 
 
    font-size: 12px; 
 
    background: #CCC 
 
}

<div class="diary"> 
 
    testing the div theory. 
 
    <br/>to see if it 
 
    <br/>will slide up and down 
 
</div>