CSS transition table-row height

问题

I have a CSS table. All the rows are the same height, but when a user clicks on one, the selected row should take up the entire table height and the rest of them should fade away. I had it working by simply setting display:none on all the other rows, but I'd like to do something with transitions.

I've tried setting max-height to 100% and then changing it to 0, but it only makes the selected row slightly bigger than the rest while the rest stay where they are. I've tried changing the height from 100% to 0, but with height at 100%, the top row is massive and the rest of them are about 15px tall.

In essence, I'd like to transition between height:auto to height:0, but that doesn't work. All it does is snap back and forth without a transition. Any ideas of how to make that work on a table-row?

回答1:

So a quick Google search revealed this:

.our_content {
    /* Initially we don't want any height, and we want the contents to be hidden */
    max-height: 0;
    overflow: hidden;

    /* Set our transitions up. */
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;
}
.outside_box:hover .our_content {
    /* On hover, set the max-height to something large. In this case there's an obvious limit. */
    max-height: 200px;
}

You'll need to change the classes and apply when you click with js. I'm curious about how polished your animations need to be. If they need to be polished, I suggest using a fade and a resize.

tr {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 360ms;
}

tr.selected {
    -webkit-animation:
    grow 420ms ease-in-out,
    fadeIn 540ms ease-in;
}
tr.deslection {
  -webkit-animation:
    shrink 420ms ease-in-out,
    fadeOut fadeIn 540ms ease-out;
}

@-webkit-keyframes grow {
  0% {
    max-height: /*initial row height*/;
  }
  100% {
    max-height: /*new row height*/;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes shrink {
  0% {
    max-height: /*new row height*/;
  }
  100% {
    max-height: /*initial row height*/;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

It sounds like you understand adding and removing classes with js, so I'm not explaining that. Please post some code if you need additional help. Good luck!

来源：https://stackoverflow.com/questions/22430008/css-transition-table-row-height

标签

css

css-transitions

css-tables

row-height