css 전환이 작동하지 않는 동안 루프

Question

내 사이트에 특정 날짜에 선수들을위한 일련의 훈련을 설정하는 테이블 목록이 있습니다.

입력 방법을 추가하고 싶습니다. 나는 당신이 마우스를 가져갈 때 또는 훈련을 클릭 할 때 div가 아래로 스크롤하여 달성 된 것을 보여줄 수 있도록 일을하고 싶습니다.

I 현재 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>'; 

내가 하나의 사업부에 그것을 시도 할 때하지만 난에 넣을 때 잘 작동하는 것 같았다

.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 
} 

CSS의 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>