CSS过渡表行高度 [英] CSS transition table-row height

问题描述

我有一个CSS表.所有行都具有相同的高度，但是当用户单击一个行时，选定的行应占据整个桌子的高度，其余的行应逐渐消失.我只需在所有其他行上设置 display:none 即可使其工作，但是我想对过渡做一些事情.

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.

我尝试将 max-height 设置为100％，然后将其更改为0，但这只会使选定的行比其余行稍大，而其余行则保持在原处.我试过将 height 从100％更改为0，但高度为100％时，第一行很大，其余的行大约为15px高.

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.

从本质上讲，我想在 height:auto 到 height:0 之间进行转换，但这是行不通的.它所要做的就是在没有过渡的情况下来回快速移动.关于如何使它在表行上工作的任何想法?

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?

推荐答案

因此，快速的Google搜索显示了此:

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

您需要更改类并在单击js时应用.我很好奇您的动画需要达到什么样的效果.如果需要抛光，建议使用淡入淡出和调整大小.

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

这听起来像您了解使用js添加和删除类，所以在此不做解释.如果您需要其他帮助，请发布一些代码.祝你好运！

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!

这篇关于CSS过渡表行高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！