【问题标题】:Showing/hiding table rows with css3 transitions使用 css3 转换显示/隐藏表格行
【发布时间】:2012-04-29 17:36:45
【问题描述】:

在我页面的一部分,我使用 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 来显示/隐藏带有动画的表格行?

【问题讨论】:

  • 没有javascript或jquery?
  • @ErikdR 是的,原因是我们使用媒体查询来在不同设备之间显着改变布局(以及因此要动画的尺寸),并且最好将所有内容保留在样式表中而不是而不是必须有一些js也以屏幕大小为条件
  • @ErikdR 虽然如果你有一个简洁的 jQuery 方法,请分享它,因为我可能不得不走这条路

标签: css css-transitions


【解决方案1】:

这样的东西是你需要的最低限度。 工作版本: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>

【讨论】:

  • 抱歉,togglebox前面的$符号消失了。在这里你可以看到一个工作版本jsfiddle.net/GCJrd
  • 不幸的是(至少在 ffx 中)一行出现,然后调整到其最大高度。我想要的是从 0 到 x 高度的动画
  • 这在表格行上是不可能的。
  • 问题是关于纯“css3 过渡”:/
【解决方案2】:

您不能将高度过渡应用于&lt;td&gt;&lt;tr&gt; 元素。但是,如果您可以使用 &lt;div&gt; 包装 &lt;td&gt; 元素的内容,则可以将 CSS 过渡应用到 &lt;div&gt; 元素。

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

【讨论】:

  • 如果您的高度大于 500 像素(例如,当您有动态行数时),它将不起作用。另外,桌面滚动时,由于500px与实际桌面高度的差异,会造成延迟。
  • 我的答案使用相同的原理,但可以处理动态行数(实际上,它是专门为此设计的)并“屏蔽”实际需要的更高最大高度的延迟.
【解决方案3】:

更新:

事实上,我之前的回答确实回答了这个问题!但不是绝对明确。这就像:“嘿,想法就在这里,只要将它应用到任何你想要的地方”。我认为解决方案的本质很清楚,任何人都可以使用它......但无论如何,我会以最清晰的方式公开整个想法,并将解决方案应用于简单的表(因为 OP 没有显示任何结构)。


解决方案:

短版:

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

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


加长版:

整个问题是表格单元格的高度是适合其内容的最小值,而表格行的高度是所有单元格所需的最小高度(因此,表格行的高度是它最高的单元格)。

从 W3(关于表格单元格高度):

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

从 W3(关于表格行高度):

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

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

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

嗯,我们有我们的“最大高度尊重元素”,我们的最大高度动画的平滑过渡,以及我们的桌子......现在是时候把所有东西放在一起了:


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


链接答案(Max-Height 值高于容器所需的平滑过渡):

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

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

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

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

这家伙的idea很牛逼,但是单单这个方案就“截断”了“滑下”动画的效果。所以稍微思考了一下,我就得出了最终的解决方案。

所以这是我使用 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>

这是一个完美的(在我看来)菜单、描述和一切不是非常不可预测的解决方案,但正如您之前指出的那样,需要设置一个较高的最大高度,并且可能会被截断一个惊人的高动态内容。在这种特定情况下,我将使用 jQuery/JavaScript 来为高度设置动画。由于内容的更新已经使用某种 JavaScript 完成,所以我看不出使用 Js 动画方法有什么坏处。


希望我能帮上忙!

【讨论】:

  • 恐怕这不能回答问题。操作要求“td”/表行,但您的答案提供了一个简单的 div。这是浪费时间。
  • 这没有提供问题的答案。要批评或要求作者澄清,请在其帖子下方发表评论。
  • @losnir 所提出的解决方案的本质解决了 OP 的问题。我同意它没有以明确的方式做到这一点,因此,我重写了我的答案以使其更加完整和清晰。请查看我的更新答案,让我知道现在它是否更有帮助且值得您投票。
  • @lmgonzalves 提出的解决方案的本质解决了 OP 的问题。我同意它没有以明确的方式做到这一点,因此,我重写了我的答案以使其更加完整和清晰。请查看我的更新答案,让我知道现在它是否更有帮助且值得您投票。
  • 很常见的方法。尝试从 0 宽度与文本宽度动态拉伸 td。
【解决方案4】:

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>Jackson</td> 
    <td>94</td>
  </tr>
</table>

【讨论】:

  • 你可以看到我设置的动画时间越长,高度没有被动画化(或者至少是这样)。
【解决方案5】:

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

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 中测试过。

【讨论】:

    【解决方案6】:

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

    (它可能也适用于其他内容,但我还没有测试过)

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

    【讨论】:

    • 在 Chrome 中,单独的 line-height 似乎不会使表格单元格高度为 0(在我的测试中为 4px)。要完全展平单元格(高度为 0),请将 font-size 设置为 0。此外,您不需要以这种方式使用 opacity。
    【解决方案7】:

    在表格行上添加动画,例如:

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

    并像这样应用它:

    animation: show-row .5s forwards;
    

    【讨论】:

    • OP 询问动画高度,而不是不透明度。 CSS 和浏览器有许多关于特定属性的警告。答案需要直接并针对手头的特定问题......在这种情况下是表格行高。
    猜你喜欢
    • 2016-12-13
    • 1970-01-01
    • 2013-11-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多