循环时CSS转换不起作用答案

【问题标题】：css transitions not working while loop循环时CSS转换不起作用
【发布时间】：2016-11-13 07:40:20
【问题描述】：

在我的网站上，我有一个表格列表，其中列出了运动员在特定日期的一系列训练。

我想添加输入他们如何做的功能。我希望它以某种方式工作，以便当您将鼠标悬停或单击训练时，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 状态并且也直接跳转到悬停状态而没有过渡。

我的问题是这可能适用于多个 div，还是有更好的方法来实现我的需要。

【问题讨论】：

这可能会对您有所帮助。检查链接：stackoverflow.com/questions/13309673/…

标签： php html css

【解决方案1】：

因为您只为height 设置了transition

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

【讨论】：