javascript - 宽度为 1px 的表格单元格内的过渡

Question

下面的代码包括一个单元格内的转换，单元格的宽度为:1px，用于包装其内容。但是表布局更改发生在转换的末尾(或开始):

var animator = document.getElementById("animator");

function Animate(){
    if(animator.style.width === "100%"){
        animator.style.width = "0";
    }else{
        animator.style.width = "100%";
    }
}

document.getElementById("btn").addEventListener("click", Animate);

<table style="width:100%;">
<tr>
  <td style="width:1px;">
  <div id="animator" style="width:100%; overflow:hidden; transition:2s linear width;">
    <div style="background-color:red;">
  111
  </div>
    </div>
  </td>
  <td>1111111111111111</td>
  <td>11111111</td>
  <td style="width:1px;">11111111</td>
</tr>
</table>

<button id="btn">Animate
</button>

如何在转换发生时强制表格布局？

Answer 1

这里有一些有用的东西。我操纵包含表格单元格的 maxWidth 属性来动态更改大小。收缩过程比生长过程更自然，但这是有效的。要更普遍地进行增长过程，您可能需要克隆 div 并在动画时测量克隆的增长，并将该宽度应用于表格单元格。有关此版本，请参阅下面的 jsfiddle。

<div id="info">Ready...</div>
<table style="width:100%;">
<tr>
  <td id="tdID" style="width:1px;">
  <div id="animator" style="width:100%; overflow:hidden; transition:2s linear width;">
    <div style="background-color:red;">
  111
  </div>
    </div>
  </td>
  <td>1111111111111111</td>
  <td>11111111</td>
  <td style="width:1px;">11111111</td>
</tr>
</table>

<button id="btn">Animate
</button>

<script>
var animator = document.getElementById("animator");
var tcell = document.getElementById("tdID");
var info = document.getElementById("info");
var t_start;
var max_width;

function shrink() {
  var d = new Date();
  var t = d.getTime();
  tcell.style.maxWidth = animator.offsetWidth + "px";
  if(t - t_start < 2000) 
    setTimeout(shrink,50);
  else
    info.innerHTML = "done";
}

function grow() {
  var d = new Date();
  var t = d.getTime();
  var pcnt = (t-t_start) / 1000;

  if(pcnt<1) {
    tcell.style.maxWidth = (max_width*pcnt) + "px";
    setTimeout(grow,50);
  }
  else {
    tcell.style.maxWidth = max_width + "px";
    info.innerHTML = "done.";  
  }
}


function Animate(){
  var d = new Date();
  t_start = d.getTime();

  info.innerHTML = "start...";
  if(animator.style.width === "100%") {
    animator.style.transition = "2s linear width";
    max_width = animator.offsetWidth; 
    animator.style.width = "0px";
    setTimeout(shrink,50);
  } else {
    animator.style.transition = "0s linear width";
    animator.style.width = "100%";
    setTimeout(grow,50);
  }
}

document.getElementById("btn").addEventListener("click", Animate);

https://jsfiddle.net/FrancisMacDougall/g2c5kcx9/