表扩展的转换

时间:2016-07-13 09:18:56

标签: javascript angularjs css-transitions

我有一张桌子,最后一张应该在点击时显示。一切正常,但我需要转换(点击表后应该顺利扩展)。

我的测试表:

  <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

上的例子

1 个答案:

答案 0 :(得分:3)

首先,CSS3过渡允许您在给定的持续时间内平滑地(从一个值到另一个值)更改属性值。换句话说,为了看到转换工作,您应该明确地在CSS中指定这两个值。

此外,您无法将高度过渡应用于表格元素(<table><tbody><tr><td>等。但是,如果您可以使用<div>元素包装内容,则可以将CSS过渡应用于<div>元素。

仅举例:https://jsfiddle.net/r4w1u5or/3/