cssトランジションがループしていないwhile

Question

私のサイトには、特定の日付にアスリートのためのトレーニングの束を設定するテーブルのリストがあります。

入力方法を追加したいと思います。私はあなたがマウスを動かすか練習をクリックすると、divがスクロールダウンして何が達成されたかを示すように働くことを望みます。私は現在、whileループに次のコードを持って

：

$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状態を無視して、ホバー状態にまっすぐジャンプします。

私の質問は、複数の部門で可能ですか、必要なものを達成するためのよりよい方法があります。

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>