CSS动画表格行宽度？

Question

采用以下基本css表。是否可以将表格单元设置为零宽度并通过css使其可动画？我似乎隐藏表格单元格的唯一方法是使用display: none，但这不是可动画的。这可能吗？

.table {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  outline: 1px solid #000;
  text-align: center;
  transition: width 0.5s ease;
}
.left,
.right {
  width: 50%;
}
.center {
  width: 0%;
}
@media (min-width: 480px) {
  .left,
  .right,
  .center {
    width: 33.333%;
    color: red;
  }
}

<div class='table'>
  <div class='row'>
    <div class='cell left'>left</div>
    <div class='cell center'>center</div>
    <div class='cell right'>right</div>
  </div>
</div>

这是jsfiddle link。

Answer 1

动画表格单元格宽度更改

魔术酱是在桌子上使用table-layout: fixed。

单元格的宽度更改为0%或0px - 用于缩小单元格的长度类型必须与用于正常的长度类型相同细胞宽度。在下面的示例中，正常宽度为33%，因此宽度更改为0%。

转换示例

如果动画用于在用户以某种方式与其进行交互时隐藏表格单元格，则只需要单元格上的transition属性：

.table {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  outline: 1px solid #000;
  text-align: center;
  width: 33%;
  overflow: hidden;
  transition: width .4s;
}
.table:hover .center {
  width: 0%
}

<div class='table'>
  <div class='row'>
    <div class='cell'>left</div>
    <div class='cell center'>center</div>
    <div class='cell'>right</div>
  </div>
</div>

使用关键帧的动画示例

此方法还可用于操纵动画中表格单元格的宽度：

.table {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  outline: 1px solid #000;
  text-align: center;
  width: 33%;
  overflow: hidden;
  transition: width .4s;
}
.center {
  animation: reduceWidth 5s infinite;
}
@keyframes reduceWidth {
  0%, 100% {
    width: 33%;
    background: #F00;
  }
  50% {
    width: 0%;
    background: #000;
  }
}

<div class='table'>
  <div class='row'>
    <div class='cell'>left</div>
    <div class='cell center'>center</div>
    <div class='cell'>right</div>
  </div>
</div>

Answer 2

您可以在.center div中为内容添加另一个容器，如下所示：

<div class='table'>
    <div class='row'>
        <div class='cell left'>left</div>
        <div class='cell center'>
          <div class="hideme">center</div>
        </div>
        <div class='cell right'>right</div>
    </div>
</div>

并将其设为display: none

.hideme {
    display: none;
}

@media (min-width: 480px) {
    .left,
    .right,
    .center {
        width: 33.333%;
        color: red;
    }
    .hideme {
        display: inline;
    }
}

选中此JSFiddle

Answer 3

像this

这样的东西

-webkit-animation: mymove 1s; /* Chrome, Safari, Opera */ 
    animation: mymove 1s;


@-webkit-keyframes mymove {
    0%   {width: 0px;}

    50%  {width: 50px}
    100% {width: 100px;}
}