CODEWITHSUNDEEP
htmlcsscss-animations
Grim
Grim

Reputation: 2030

CSS unfold animation of bounding-box's height

I like to unfold animate a table-body.

@keyframes unfolding{
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
tbody{
  animation-duration: 2s;
  animation-name: unfolding;
}
<table>
  <thead>
    <tr><td>Start</td></tr>
  </thead>
  <tbody>
    <tr><td>unfolding td</td></tr>
  </tbody>
  <tfoot>
    <tr><td>End</td></tr>
  </tfoot>
</table>

Unfortunately the height of the tbody's bounding-box is not animated. The "End" should start right under "Start" and move downwards within the 2 seconds animation. How to do that without knowing the tbody's final height?

Not a duplicate of How can I transition height: 0; to height: auto; using CSS?

Edit: because neither the question mention the growing-bounding-box problem nor did any answer solve the growing-bounding-box problem. In example, the first answers mention the max-height that is ignored by tbody. The second answer ignore the growing bounding-box completely and use clip that does not move the lower part downwards.

Upvotes: 0

Views: 66

Answers (1)

Marie Hekel
Marie Hekel

Reputation: 69

I've been tinkering with css animations alot lately.. hopefully this will help ?... ideally, setting max-height on tbody is initially set to 0 will collapse it and the transition property animates the change in max-height.

The unfolding class sets a large enough max-height to ensure full expansion and setting tbody to display: block allows for height animation.

and finally tfoot is set to display: table-footer-group this ensures it appears correctly after tbody animation runs and exands

  1. html

    <table>
  <thead>
     <tr><td>Start</td></tr>
  </thead>
     <tbody>
        <tr><td>unfolding td 1</td></tr>
        <tr><td>unfolding td 2</td></tr>
        <tr><td>unfolding td 3</td></tr>
     </tbody>
     <tfoot>
       <tr><td>End</td></tr>
     </tfoot>
  </table>

  2. CSS

    `@keyframes unfolding { 
   0% { max-height: 0; opacity: 0; }
   100% { max-height: 1000px; /* A large enough height to ensure full expansion */opacity: 1;}}

table {border-collapse: collapse;}

 tbody {display: block; max-height: 0; overflow: hidden; transition: max-height 2s ease-out;}
 tbody.unfolding {max-height: 1000px; /* A large enough height to ensure full expansion */}

 tfoot {display: table-footer-group; /* Ensure tfoot follows the tbody */}

  3. js

    window.addEventListener('DOMContentLoaded', (event) => {
document.querySelector('tbody').classList.add('unfolding');
 });

  4. extra credit

     `<button id="toggleButton">Unfold Table</button>

  <script> window.addEventListener('DOMContentLoaded', (event) => { const button = document.getElementById('toggleButton'); const tbody = document.querySelector('tbody'); button.addEventListener('click', () => { tbody.classList.toggle('unfolding'); button.textContent = tbody.classList.contains('unfolding') ? 'Fold Table' : 'Unfold Table'; }); }); </script>`

Upvotes: -2

Related Questions