CSS 使用 css3 转换显示/隐藏表格行

Showing/hiding table rows with css3 transitions

提问by wheresrhys

On one part of my page I'm using css3 transitions to show/hide some divs with a nice sliding effect

在我页面的一部分上，我使用 css3 转换来显示/隐藏一些具有很好滑动效果的 div

.service_status {
        max-height: 0;
    -webkit-transition: max-height 1s ease-in-out;
    -moz-transition: max-height 1s ease-in-out;
    -ms-transition: max-height 1s ease-in-out;
    -o-transition: max-height 1s ease-in-out;
    transition: max-height 1s ease-in-out;
}

.service_status.open {
    max-height: 500px;
    -webkit-transition: max-height 1s ease-in-out;
    -moz-transition: max-height 1s ease-in-out;
    -ms-transition: max-height 1s ease-in-out;
    -o-transition: max-height 1s ease-in-out;
    transition: max-height 1s ease-in-out;
}

I'd like to use the same technique on some table rows but max-height and height aren't having any effect (due to the CSS specs for tables I guess). Is there a way I can show/hide table rows with an animation using just CSS3 transitions and no js?

我想在某些表格行上使用相同的技术，但 max-height 和 height 没有任何影响（我猜是由于表格的 CSS 规范）。有没有办法只使用 CSS3 过渡而不使用 js 来显示/隐藏带有动画的表格行？

回答by Vitox

Update:

更新：

In fact my previous answer DOES ANSWER the question! But not absolutely explicitly. It's like: "Hey, the idea is here, just apply it wherever you want". I thought that the essence of the solution was clear, and anybody would be able to use it... But any way, I will expose the whole idea, in the most clear way I can, and also will apply the solution to a simple table (since OP don't shown any structure).

事实上，我之前的回答确实回答了这个问题！但不是绝对明确。就像：“嘿，创意就在这里，随心所欲地应用它”。我以为解决方案的本质是明确的，任何人都可以使用它......但无论如何，我都会以最清晰的方式暴露整个想法，并将解决方案应用于一个简单的表（因为 OP 没有显示任何结构）。

Solution:

解决方案：

Short Version:

精简版：

Using a Div to wrapper the content into the cell, we are able to use max-height property, and also the max-height transition. With a custom transition curve, we can "mask off" the delay of using a high max-height.

使用 Div 将内容包装到单元格中，我们可以使用 max-height 属性，以及 max-height 过渡。使用自定义过渡曲线，我们可以“屏蔽”使用高最大高度的延迟。

Demo here: http://jsfiddle.net/1rnc9bbm/4/

演示在这里：http: //jsfiddle.net/1rnc9bbm/4/

Long Version:

长版：

The whole problem is that a table-cell's height is the minimum to fit its content, and table-row's height is the minimum height required for all cells (so, the height of the table-row is the minimum height required by its tallest cell).

整个问题是表格单元格的高度是适合其内容的最小值，表格行的高度是所有单元格所需的最小高度（因此，表格行的高度是其最高单元格所需的最小高度）。

From W3 (About Table-Cells Height):

从 W3（关于表格单元格高度）：

In CSS 2.1, the height of a cell box is the minimum height required by the content.

在 CSS 2.1 中，单元格框的高度是内容所需的最小高度。

From W3 (About Table-Rowss Height):

从 W3（关于表格行高度）：

The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells.

'table-row' 元素框的高度在用户代理拥有行中所有可用单元格后计算：它是该行计算的“高度”的最大值，该行中每个单元格的计算“高度”，以及单元格所需的最小高度 (MIN)。

Under these circumstances, our only choice is restrict the height indirectly using inner markup, normally a div element. Because a Div element respect a max-height, it will stretch our content, and our table-cell will also respect the "div's max-height", because this is all the required height it needs.

在这种情况下，我们唯一的选择是使用内部标记间接限制高度，通常是一个 div 元素。因为一个 Div 元素尊重一个最大高度，它会拉伸我们的内容，我们的表格单元也会尊重“div 的最大高度”，因为这是它需要的所有必需的高度。

The problem with max-height transition is only a delay, caused by how the transition is calculated. In a table, usually you display a dynamic content that have dynamic and unpredictable length (which becomes table-cell height), so We don't know the precise max-height that our table will need to exactly fit the expanded content. Thus, We need to set a higher max-height, that will be more than the needed by some cells. When it happens, our transition is calculated wrong (based on the max-height and not in total height that will be shown/animated), and animation becomes weird and imprecise. To show a nice and smooth transition for user, I found a brilliant solution using a custom transition curve. More details about this problem and its solution are at the end of this answer.

最大高度过渡的问题只是一个延迟，由过渡的计算方式引起。在表格中，通常您会显示具有动态且不可预测的长度（成为表格单元格高度）的动态内容，因此我们不知道我们的表格需要精确适合扩展内容的精确最大高度。因此，我们需要设置更高的最大高度，这将超过某些单元格所需的高度。当它发生时，我们的过渡计算错误（基于最大高度而不是将显示/动画的总高度），并且动画变得奇怪和不精确。为了向用户展示一个漂亮而平滑的过渡，我找到了一个使用自定义过渡曲线的绝妙解决方案。有关此问题及其解决方案的更多详细信息，请参见本答案的末尾。

Well, we have our "max-height respectful element", a smooth transition for our max-height animation, and our table... Now is time to put everything together:

好吧，我们有我们的“最大高度尊重元素”，我们的最大高度动画的平滑过渡和我们的桌子......现在是时候把所有东西放在一起了：

Html:

网址：

<table>
    <tr>
        <td>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.
            </div>
        </td>
    </tr>
</table>

Css:

css：

table{
    border: 1px solid #ddd;
}


div{
    background-color: #ddd;
    width: 400px;

    overflow: hidden;
    -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
    -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
    transition: max-height 1.5s ease cubic-bezier(0, 1.05, 0, 1);

    max-height: 38px;
}

div:hover{
    -webkit-transition: max-height 2s ease;
    -moz-transition: max-height 2s ease;
    transition: max-height 2s ease;

    max-height: 400px;
}

Simple demo here (the code shown above): http://jsfiddle.net/1rnc9bbm/3/, and a more complete (and common) table demo here: http://jsfiddle.net/1rnc9bbm/4/

这里的简单演示（上面显示的代码）：http: //jsfiddle.net/1rnc9bbm/3/，以及更完整（和常见）的表演示：http: //jsfiddle.net/1rnc9bbm/4/

I don't think that the downvotes were fair, but I agree that this version now is a lot more complete, and does answer in a explicitly way the OP's question. If you have any questions, or points that want me to clarify, you don't need to downvote (please), just ask/comment above. I'll be very happy to help if I can.

我不认为投反对票是公平的，但我同意这个版本现在更加完整，并且确实以明确的方式回答了 OP 的问题。如果您有任何问题或希望我澄清的要点，您无需投票（请），只需在上面提问/评论即可。如果可以的话，我会很乐意提供帮助。

Obs: OP don't provided a Html, neither details about the table He want's to expand, so my whole solution is based in the usually table use.

Obs：OP 没有提供 Html，也没有关于他想要扩展的表的详细信息，所以我的整个解决方案基于通常的表使用。

Previous (Original) Answer:

上一个（原始）答案：

I just answered this exacly situation in another question here. And in my specific case, I needed to do exactly what You said. I have a table, and want to expand a table rowwhen user hovers it.

我刚刚在另一个问题中回答了这种情况。在我的具体情况下，我需要完全按照你说的去做。我有一个表格，想在用户悬停它时展开表格行。

The same answer applies to your question:
https://stackoverflow.com/a/27773588/3395460

同样的答案适用于您的问题：https:
//stackoverflow.com/a/27773588/3395460

Linked Answer (Smooth Transitions with Higher Max-Height value than needs by container):

链接答案（平滑过渡的最大高度值高于容器的需要）：

As pointed by @maskacovnik, it'll be a more complete (and integral) answer if it also contains the code of my first answer, and also the code that explains part of the solution of my updated answer. Here is it:

正如@maskacovnik 所指出的，如果它还包含我的第一个答案的代码，以及解释我更新的答案的部分解决方案的代码，它将是一个更完整（和完整）的答案。就这个：

[...] I needed to show mode details of a product description inside a cell-table when user hovers the cell. Without user hovering, only the maximum of 2 lines of description are shown. Once user hovers it, all lines (text can be since 1 to 8 lines, dynamic and unpredictable length) must be show with some kind of height animation.

I come to the same dilemma, and choose to use the max-height transition (setting a high max-height, which I was sure that will not cut my text), because this approach appears to me to be the cleanest solution to animate the height.

But I couldn't be satisfied with the delay on the "slide up" animation, just like You. That's when I found a commentary about transition curve here: http://css3.bradshawenterprises.com/animating_height/.

The Idea of this guy is brilliant, but just this solution alone "cut-off" the effect of "slide down" animation. So thinking a little I just come to a final solution.

So here is my solution using the Rhys's Idea (Guy of link above):

Slide Down Animation (Hover), with a "smooth grow", and Slide Up Animation without (virtually) "delay":

[...] 当用户悬停单元格时，我需要在单元格表中显示产品描述的模式详细信息。没有用户悬停，只显示最多 2 行描述。一旦用户将其悬停，所有行（文本可以是 1 到 8 行，动态且不可预测的长度）必须以某种高度动画显示。

我遇到了同样的困境，并选择使用最大高度过渡（设置一个高的最大高度，我确信这不会削减我的文本），因为在我看来，这种方法是制作动画的最干净的解决方案高度。

但是我不能满足于“向上滑动”动画的延迟，就像你一样。那时我在这里找到了关于过渡曲线的评论：http: //css3.bradshawenterprises.com/animating_height/。

这家伙的想法很棒，但仅此解决方案就“切断”了“下滑”动画的效果。所以稍微思考一下，我就得出了最终的解决方案。

所以这是我使用 Rhys 的想法（上面链接的人）的解决方案：

向下滑动动画（悬停），具有“平滑增长”，以及没有（几乎）“延迟”的向上滑动动画：

div {
  background-color: #ddd;
  width: 400px;
  overflow: hidden;
  -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  max-height: 38px;
}
div:hover {
  -webkit-transition: max-height 2s ease;
  -moz-transition: max-height 2s ease;
  transition: max-height 2s ease;
  max-height: 400px;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis
  placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.
</div>

This is a perfect (in my opinion) solution for menu, descriptions and everything that isn't extremely unpredictable, but as You pointed before, there is the need to set up a high max-height, and may cut-off a surprisingly tall dynamic content. In this specific situation, I'll use jQuery/JavaScript to animate the height instead. Since the update of the content will be done using some sort of JavaScript already, I can't see any harm using a Js approach to animation.

这是一个完美的（在我看来）菜单、描述和一切不是非常不可预测的解决方案，但正如你之前指出的，需要设置一个高的最大高度，并且可能会截断一个惊人的高动态内容。在这种特定情况下，我将使用 jQuery/JavaScript 来为高度设置动画。由于内容的更新已经使用某种 JavaScript 完成，我看不出使用 Js 动画方法有任何危害。

Hope I helped!

希望我有所帮助！

回答by Tzach

You cannot apply height transitions to <td>or <tr>elements. However, if you can wrap the contents of the <td>elements with a <div>, you can apply CSS transitions to the <div>elements.

您不能对<td>或<tr>元素应用高度过渡。但是，如果您可以用 包裹<td>元素的内容，则可以对元素<div>应用 CSS 过渡<div>。

HTML:

HTML：

<tr>
  <td><div>Contents</div></td>
  <td><div>Contents</div></td>
</tr>

CSS:

CSS：

tr div {
  max-height:0;
  transition: max-height 1s ease-in-out;
}
tr.open div {
  max-height: 500px;
}

回答by Ronnie Royston

Line Height: Here you go.

Line Height： 干得好。

var doc = document;
var myElements = doc.querySelectorAll("[data-row='047384']");

if(myElements.length > 0){
  myElements[0].addEventListener("click", function(){
    showRows(myElements);
  });
}

function showRows(elements){
  for (var i = 0; i < elements.length; i++) {
    if(elements[i].tagName.toLowerCase() !== 'button'){
      elements[i].classList.toggle('show');
    }
  }
}

.table-part-row{
  line-height:0;
  transition: 1s;
  opacity: 0;
}
.table-part-row.show {
  line-height:1em;
  opacity: 1;

}

<br>
<table>
  <tr>
    <th></th>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr data-row="047384">
    <td><button data-row="047384"></button></td>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr class="table-part-row" data-row="047384">
    <td></td>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr class="table-part-row" data-row="047384">
    <td></td>
    <td>Eve</td>
    <td>Hymanson</td> 
    <td>94</td>
  </tr>
</table>

回答by Tim Schoch

I found one way to hide a table row with css that works for plain text without adding those nasty div's. It's not the "does all, fixes all"solution but you might want to give it a try if you're only dealing with text in your tables.

我找到了一种使用 css 隐藏表格行的方法，该方法适用于纯文本，而无需添加那些讨厌的 div。这不是“一劳永逸”的解决方案，但如果您只处理表格中的文本，您可能想尝试一下。

(It might work for other content too, but I haven't tested that)

（它可能也适用于其他内容，但我还没有测试过）

  

// just used to toggle the hide class - use what every you fancy
$('button').click(function(){ $('.toggle').toggleClass('hide'); });

td {
  opacity: 1;
  padding: 10px;
  line-height: 20px;
  transition: all 0.2s ease-in-out;
} 
.hide td {
  opacity: 0;
  line-height: 0px;
  padding: 0 10px;
}

/* just some basic setup */
table {
  border-collapse: collapse;
}
td {
  background: #f1f1f1;
}
tr:nth-child(odd) td {
  background: #f9f9f9;
}

<button>Toggle Table Row</button>
<br /><br />

<table>
<tr>
  <td>foo</td>
</tr>
<tr class="toggle">
  <td>Hide Me!</td>
</tr>
<tr>
  <td>foo</td>
</tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

回答by ot_ik_

I just came over same thing my solution was to use div in cell as well, but to animate I've used inner div and margin-bottom instead of max-height. Snipped would be:

我刚刚遇到同样的事情，我的解决方案是也在单元格中使用 div，但是为了动画我使用了内部 div 和 margin-bottom 而不是 max-height。剪断将是：

html:

html：

<tr><td colspan="7">
  <div class="content">
    <div class="amin">
        multi line text
    </div>
   </div>
</td></tr>

css:

css：

.content {
    overflow: hidden:
    margin: 0;
    float: left;
}
.anim {
    margin-bottom: -50%; /*use calc() to whatever suits you*/
    transition: all 5s;
}
.content:hover anim {
    margin-bottom: 0;
}

I've tested in FF only.

我只在 FF 中测试过。

回答by salah eddine Elkarouani

Add an animation on table rows, for example :

在表格行上添加动画，例如：

@keyframes show-row {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

And apply it like this :

并像这样应用它：

animation: show-row .5s forwards;

回答by Scriptor

Something like this is the minimum you need. Working version: http://jsfiddle.net/GCJrd/

像这样的东西是你需要的最低限度。工作版本：http: //jsfiddle.net/GCJrd/

head

头

<style>
.togglebox {
background-color:#CCC;
height: 100px;
max-height: 100px;
-webkit-transition: max-height 1s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-ms-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
</style>

<script src="js/jquery-1.7.1.min.js"></script>
<script>
  $(document).ready(function(){
    //Hide the toggle-area when page load
    $(".togglebox").hide();
    //slide up and down when click over id #one
    $("#one").click(function(){
    // slide toggle effect set to 600 you can set it faster too.
    $(".togglebox").slideToggle(600);
    return true;
  });
});
</script>

body

身体

<button id="one">showLine1</button>
<table id="my_table">
<tbody>
  <tr>
  <td>1</td>
  <td>2</td>
 </tr>
 <tr class="togglebox">
  <td>hidden 1</td>
  <td>hidden 2</td>
  </tr>
</tbody>
</table>