CODEWITHSUNDEEP
javascripthtmlcss
John L.
John L.

Reputation: 1953

Transition Inside A Table Cell With Width 1px

The below code includes a transition inside a cell that has width:1px for it to wrap its content. But table layout change happens at the end (or start) of the transition:

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>

How can I force table to layout as the transition is taking place?

Upvotes: 0

Views: 87

Answers (1)

fmacdee
fmacdee

Reputation: 2436

Here is something that works. I manipulated the maxWidth property of the containing table cell to dynamically change the size. The shrinking process is a more natural one than the growing process but this works. To do the growing process more universally you would likely need to clone the div and measure the growth of the clone as it animates, and apply that width to the table cell. See the jsfiddle below for this version.

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

Upvotes: 1

Related Questions