在寬度爲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的表格單元格內轉換

回答

相關問題