表格扩展的过渡答案

【问题标题】：Transition for table expanding表格扩展的过渡
【发布时间】：2016-11-15 19:03:57
【问题描述】：

我有一张桌子，最后一张应该在点击时显示附加信息。一切正常，但我需要一个过渡（点击后表格应该会顺利展开）。

我的测试表：

  <div ng-app="app">
    <table>
      <thead ng-controller="TestController">
        <tr>
          <th>
            head
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            first
          </td>
        </tr>
        <tr>
          <td>
            second
          </td>
        </tr>
        <tr ng-show="display">
          <td>
            third
          </td>
        </tr>
        <tr ng-show="display">
          <td>
            fourth
          </td>
        </tr>
        <tr ng-show="display">
          <td>
            fifth
          </td>
        </tr>
        <tr ng-click="display = !display" class="last-color">
          <td>
            click me
          </td>
        </tr>
      </tbody>
    </table>
  </div>

CSS：

table {
  border: solid 1px;
}

td {
  border: solid 2px;
}

.last-color td {
  background-color: green;
}

tbody {
    transition: height 2s;
}

我在JSFiddle上的例子

【问题讨论】：

你应该明确你想要什么，因为smoothly是一个松散的概念。

标签： javascript angularjs css-transitions

【解决方案1】：

首先，CSS3 过渡允许您在给定的持续时间内平滑地更改属性值（从一个值到另一个值）。换句话说，为了让过渡生效，您应该在 CSS 中明确指定这两个值。

此外，您不能将高度转换应用于表格元素（<table>、<tbody>、<tr>、<td> 等）。但是，如果您可以使用 <div> 元素包装内容，则可以将 CSS 过渡应用到 <div> 元素。

例如：https://jsfiddle.net/r4w1u5or/3/

【讨论】：