css显示的动画扩展：表格

Question

首先，相关的JSFiddle。

我有一个通过PHP生成表的站点。它由很多条目组成，所以我想只显示5行和一个使用JS .animate扩展div的按钮。 不幸的是，设置display:table属性时，似乎不尊重高度（或最大高度）。它总是显示所有行，立即使“更多”按钮无效。

我的第二个想法是首先隐藏第5行之后的所有行，然后按下按钮取消隐藏它们。这有效，但动画没有。但是，通过.animate重新隐藏和更改div大小。 （参见我的JSFiddle实现）

我很困惑，有没有办法用display:table动画div的增长？

所有这些都在Chrome和Edge btw上进行了测试。

Answer 1

不是动画display: table div的高度，而是将其放在父div中，该div具有（默认情况下）display: block。

现在你可以通过jQuery animate()父div的高度，显示和隐藏里面的表格。

示例：

＆＃13;

＆＃13;

$(document).ready(function(){

    $('#more').click(function(e) {
        e.stopPropagation();
        var he = $('.clipping-div')[0].scrollHeight;
        $('.clipping-div').animate({height: he});
    });

    $(document).click(function() {
        $('.clipping-div').animate({height: '50px'});
    });

});

＆＃13;

.clipping-div {
  height: 50px;
  overflow: hidden;
  }

.table {
  width: 50%;
  border: 1px solid black;
  display: table;
  }

.row {
  display: table-row;
  height: 25px;
}

＆＃13;

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

<div class="clipping-div">
<div class="table">
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
</div>
</div>

<a id="more" href="#">Read more </a>

＆＃13;

＆＃13;

＆＃13;

[实验]使用原生Javascript和CSS过渡的替代解决方案

我想提出一个使用javascript和CSS以及原始无包装标记的替代解决方案（因为使用.clipping-div包装器感觉不够优雅）。

但是，display: table和display: table-row（我不习惯使用这两者）似乎有很多限制因素：

• 两种display风格似乎都不允许动画 height或line-height
• display: table-row不允许border个样式
• display: table-row也未获准z-index

依旧......

结论：display: table似乎非常顽固，难以使用。

以下是对无包装解决方案的尝试，使用opacity来弥补z-index和outline的不足，以弥补border的不足，但是......这不是我最好的工作。

＆＃13;

＆＃13;

var more = document.getElementById('more');
var body = document.getElementsByTagName('body')[0];
var clippingTable = document.getElementsByClassName('clipping-table')[0];
var clippingTableRows = clippingTable.getElementsByClassName('row');

more.style.top = ((clippingTableRows.length - 2) * - 25) + 12 + 'px';

function moreTable(e) {
    e.stopPropagation();
    for (var i = (clippingTableRows.length - 1); i > 1; i--) {
        clippingTableRows[i].style.transform = 'translateY(0)';
        clippingTableRows[i].style.opacity = '1';
        more.style.top = '12px';
    }
}

function lessTable() {

    for (var i = (clippingTableRows.length - 1); i > 1; i--) {
        clippingTableRows[i].removeAttribute('style');
        more.style.top = ((clippingTableRows.length - 2) * -25) + 12 + 'px';
    }
}

more.addEventListener('click', moreTable, false);
body.addEventListener('click', lessTable, false);

＆＃13;

#more {
position: relative;
transition: top 0.5s;
}

.clipping-table {
  display: table;
  width: 400px;
  }

.row {
  display: table-row;
  height: 25px;
  outline: 1px solid black;
}

.row:nth-of-type(odd) {
background-color: rgb(191,191,255);
}

.row:nth-of-type(even) {
background-color: rgb(127,127,255);
}

.row:nth-of-type(n+3) {
opacity: 0;
transition: all 0.5s;
}

.row:nth-of-type(3) {
  transform: translateY(-25px);
}

.row:nth-of-type(4) {
  transform: translateY(-50px);
}

.row:nth-of-type(5) {
  transform: translateY(-75px);
}

.row:nth-of-type(6) {
  transform: translateY(-100px);
}

.row:nth-of-type(7) {
  transform: translateY(-125px);
}

.row:nth-of-type(8) {
  transform: translateY(-150px);
}

.row:nth-of-type(9) {
  transform: translateY(-175px);
}

.row:nth-of-type(10) {
  transform: translateY(-200px);
}

＆＃13;

<div class="clipping-table">
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
  <div class="row">asdasdasdasd</div>
</div>

<a id="more" href="#">Read more </a>

＆＃13;

＆＃13;

＆＃13;