在宽度为1px的表格单元格内转换

下面的代码在单元格内包含一个转换，宽度为1px，用于包装其内容。但表格布局的变化发生在月底（或启动）的过渡：在宽度为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>

我怎么能强制表格布局转变正在发生？

来源

2017-03-07 John L.

首先第一件事情：1）使用JS找出'td'的实际宽度和设置。这样你可以选择性地将'111'和红色'div'嵌套。 b）使用'background-image'（或者甚至是'background-color'，不确定吗？），而不是动画化它的位置/大小。 – domsson

这是有用的东西。我操纵了包含表格单元格的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/

来源

2017-03-07 15:34:26 fmacdee

在宽度为1px的表格单元格内转换

回答

相关问题