CSS Animatable table 行宽？

Question

采取以下基本csstable。是否可以将 table-cell 设置为零宽度并通过 css 使其成为 animatable？我似乎可以隐藏 table-cell 的唯一方法是使用 display: none，但这不是 animatable。这可能吗？

.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

类似于this

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


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

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

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

动画 table 单元格宽度变化

魔法酱是在table上使用table-layout: fixed。

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

转换示例

如果动画仅用于在用户以某种方式与它交互时隐藏 table 单元格，那么您只需要在单元格上添加 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 个单元格的宽度：

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

CSS Animatable table 行宽？

CSS Animatable table row width?

html

css

css-animations

css-tables

动画 table 单元格宽度变化

转换示例

使用关键帧的动画示例