CSS转换表行高

我有一张CSS表格。所有行的高度都相同，但当用户单击其中一行时，所选行应占据整个表格高度，其余行应逐渐消失。我只需在所有其他行上设置

display:none

，就可以工作了，但我想做一些转换

我尝试将

max height

设置为100%，然后将其更改为0，但这只会使所选行略大于其余行，而其余行保持不变。我已经尝试将

高度从100%更改为0，但是高度为100%时，最上面的一行是巨大的，其余的大约是15px高

本质上，我想在
height:auto
和
height:0
之间转换，但这不起作用。它所做的一切就是不经过转换地来回捕捉。有没有办法让它在一排桌子上工作
 谷歌搜索显示：

当您使用js单击时，需要更改类并应用。我很好奇你的动画需要多么完美。如果需要抛光，我建议使用渐变和调整大小

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

听起来您似乎理解如何使用js添加和删除类，所以我不会对此进行解释。如果您需要其他帮助，请发布一些代码。祝你好运
 这可能需要一点javascript。这就是我更改属性的方式，但我希望css能够处理实际的动画/转换。不幸的是，我认为这对表行或单元格不起作用-它们的行为似乎是独一无二的。我自己也在尝试，但还没有找到一个有效的解决方案。你为什么要用桌子？使用div更容易实现这一点。你能发布你的问题和代码然后回复吗？我很感激你的提议，但目前的情况是，我的任务只是提供样式-无法控制项目中使用的标记：（如果没有过渡高度，那就不是世界末日了）只会有一点额外的吸引力。
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;
  }
}