使用css3过渡显示/隐藏表行

时间：2012-04-18 10:06:11

标签： css css3 css-transitions

在我的页面的一部分，我使用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;
}

我想在某些表格行上使用相同的技术但是max-height和height没有任何效果（由于我猜的表格的CSS规范）。有没有一种方法可以使用CSS3过渡而不使用js来显示/隐藏具有动画的表行？

7 个答案:

答案 0 :(得分：14)

<强>更新

事实上我之前的回答是回答这个问题！但并非绝对明确。它就像：＆＃34;嘿，这个想法就在这里，只需将它应用到你想要的任何地方＆＃34;。我认为解决方案的本质是明确的，任何人都可以使用它...但无论如何，我将以最清晰的方式揭示整个想法，并将解决方案应用于简单表（因为OP没有显示任何结构）。


<强>解决方案：

简短版本：

使用Div将内容包装到单元格中，我们可以使用max-height属性，也可以使用max-height过渡。通过自定义转换曲线，我们可以屏蔽掉＃34;延迟使用高最大高度。

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


长版：

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

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

  

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

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

  

表格行的高度＆＃39;一旦用户代理具有行中的所有单元格，就会计算元素的框：它是行的最大值＆＃39; height＆＃39;，计算的＆＃39; height＆＃39; 39;行中的每个单元格，单元格所需的最小高度（MIN）。

在这种情况下，我们唯一的选择是使用内部标记间接限制高度，通常是div元素。因为Div元素尊重最大高度，它会拉伸我们的内容，而我们的table-cell也会尊重＆＃34; div的最大高度＆＃34;，因为这是它需要的所有高度

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

嗯，我们有我们的＆＃34; max-height尊重元素＆＃34;，我们的最大高度动画的平滑过渡，以及我们的表...现在是时候把所有东西放在一起了：


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：

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

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

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

Obs：OP没有提供Html，也没有关于他希望扩展的表的详细信息，因此我的整个解决方案都基于通常的表格使用。


上一篇（原创）答案：

我刚才在另一个问题上回答了这个非常糟糕的情况。在我的具体案例中，我需要完全按照你所说的去做。我有一张桌子，想要在用户将其悬停时展开一个表格行。

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


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

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

  

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

     

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

     

但是我不能满足于＃34;滑倒＆＃34;动画，就像你一样。   当我在此处找到关于过渡曲线的评论时：http://css3.bradshawenterprises.com/animating_height/。

     

这个人的想法很棒，但仅仅是这个解决方案和＃34;切断＆＃34; ＆＃34;向下滑动＆＃34;动画。所以稍微思考一下，我才能找到最终的解决方案。

     

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

     

向下滑动动画（悬停），使用＆＃34;平滑增长＆＃34;和向上滑动动画，不用（＃）;延迟＆＃34;：

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>
  

这是一个完美的（在我看来）解决方案，菜单，描述和一切都不是非常难以预测，但正如你之前指出的那样，需要设置一个高的最大高度，并且可能会切割 - 一个令人惊讶的高动态内容。在这种特定情况下，我将使用jQuery / JavaScript来设置高度的动画。由于内容的更新将使用某种JavaScript进行，因此我无法使用Js方法对动画造成任何伤害。


希望我帮忙！

答案 1 :(得分：8)

您无法将高度转换应用于<td>或<tr>元素。但是，如果您可以使用<td>包装<div>元素的内容，则可以将CSS转换应用于<div>元素。

HTML：

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

CSS：

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

答案 2 :(得分：5)

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: 0.2s;
  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>Jackson</td> 
    <td>94</td>
  </tr>
</table>

答案 3 :(得分：0)

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

HTML：

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

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

我只在FF中测试过。

答案 4 :(得分：0)

我发现了一种用css隐藏表行的方法，这种方法适用于纯文本而不添加那些讨厌的div。它不是＆＃34;全部，修复所有＆＃34; 解决方案，但如果您只处理表格中的文字，则可能需要尝试一下。

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

＆＃13;
＆＃13; 
  

// just used to toggle the hide class - use what every you fancy
$('button').click(function(){ $('.toggle').toggleClass('hide'); });
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：-2)

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

<强>头 

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

<强>体 

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

答案 6 :(得分：-2)

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

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

并像这样应用它：

animation: show-row .5s forwards;
相关问题
最新问题