CODEWITHSUNDEEP
csscss-animations
omer
omer

Reputation: 2623

css-animation on table row how to affect height

i'm trying to create a css animation that unfold a table row. (i can't use div or any thing other then table..) i'm using transform: scale(1,0); and it works fine but i want the actual height to be animated and not to have an empty shell that only get filled. tried to animate max-height but it add no affect also found this answer but same no affect CSS transition table-row height

<table>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr class="add-row-animation">
    <td>three</td>
    <td>for</td>
  </tr>
</table>

css:

table{
  border: 1px solid black;
  tr{
    td{
      border: 1px solid black;
    }
    &.add-row-animation{
          animation: addRow 2s 1 linear;
          transform-origin:  top;
            @keyframes addRow{
          0% {
            transform: scale(1, 0);
            background-color: #fff;
            visibility: collapse;

          }
          50%{
            background-color: orange;
            transform: scale(1,1);
            visibility: visible;
          }
          100% {
            background-color: #fff;
          }
        }
    }
  }
}

link to jsfiddle - https://jsfiddle.net/z5Lhqbc4/

Upvotes: 2

Views: 2319

Answers (1)

johannchopin
johannchopin

Reputation: 14853

You have to use the property line-height to change the height of a table row:

table {
  border: 1px solid black;
}

table tr td {
  border: 1px solid black;
}

table tr.add-row-animation {
  transition-duration: 1s;
  animation: addRow 2s 1 linear;
  transform-origin: top;
}

@keyframes addRow {
  0% {
    transform: scale(1, 0);
    line-height: 0px;
    background-color: #fff;
    visibility: collapse;
  }
  50% {
    background-color: orange;
    transform: scale(1, 1);
    line-height: 18px; /* font-size(16px) + border-top(1px) + border-bottom(1px) */
    visibility: visible;
  }
  100% {
    background-color: #fff;
  }
}
<table>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr class="add-row-animation">
    <td>three</td>
    <td>for</td>
  </tr>
</table>

Upvotes: 4

Related Questions