CODEWITHSUNDEEP
javascriptangularjscss-transitions
Roman
Roman

Reputation: 12201

Transition for table expanding

I have a table and the last should show additional on click. Everything works fine, but I need a transition (after click the table should expand smoothly).

My test table:

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

My example on JSFiddle

Upvotes: 0

Views: 1591

Answers (1)

Alex M
Alex M

Reputation: 2836

First of all, CSS3 transitions allow you to change property values smoothly (from one value to another), over a given duration. In other words, in order to see a transition working, you should specify both values in your CSS explicitly.

More over, you cannot apply height transitions to table elements (<table>, <tbody>, <tr>, <td>, etc.). However, if you can wrap the contents with <div> elements, you can apply CSS transitions to the <div> elements.

Just for example: https://jsfiddle.net/r4w1u5or/3/

Upvotes: 3

Related Questions