CODEWITHSUNDEEP
htmlcssanimationhtml-table
Lilla
Lilla

Reputation: 209

Make a table cell gradually disappear leaving no blank spaces

I have a table cell and id like to make it gradually disappear a few seconds after the page is loaded. Animating the opacity did not work, since it left a white space, as well as animating the display option, which is not gradual. How can I do this, using a CSS class? (or a Javascript function or whatever you advise me)

Here's my code:

echo '
    <tr id="errore">
        <td id="errore"colspan="4" class="object line" style="background-color: #FFD927; color:white;">'.$_SESSION["errore"].'</td>
    </tr>';

Thanks in advance!

Here's the CSS part

    @-webkit-keyframes disappear { 
     0% {opacity:1}
     100% {opacity:0} 
    } 

    #errore, #messaggio{
     -webkit-animation-name: disappear ; 
     -webkit-animation-duration: 1s; 
     -webkit-animation-delay: 1s; 
     -webkit-animation-fill-mode: forwards; 
    }

Upvotes: 0

Views: 247

Answers (1)

JavaScriptArray
JavaScriptArray

Reputation: 140

First animate the opacity until the table-cell becomes white space, then using JavaScript after a few seconds set the .style.display of the table cell to "none"

here's example code (you would need to edit it for table cells and rows):

This code will now work in Firefox and you can choose to comment out incH and its compliment: element.style.height... which make the height decrease as time passes; with other elements, you may want to instead edit the line-height or other properties to determine their changing height. Remember to add + "%" to the line-height property for: 1. it to be a property as a string, and 2. for it to have a unit to modify. 

<!doctype html>
<body>
</body>
<script>
  var before = document.createTextNode("before");
  document.body.appendChild(before);
  document.body.appendChild(document.createElement("br"));
  var elementRGB = [0, 40, 100];
  var element = document.createElement("canvas");
  element.style.background = 'rgb(0, 40, 100)';
  element.style.display = "block";
  element.style.top = "40px";
  element.style.left = "40px";
  element.style.height = "40px";
  element.style.width = "40px";
  document.body.appendChild(element);
  var after = document.createTextNode("after");
  document.body.appendChild(after);
  function animate(element) {
    //this and...
    var incH = Math.ceil(parseInt(element.style.height) / ((255 - Math.min(elementRGB[0], Math.min(elementRGB[1], elementRGB[2]))) / 5));
    var interval = setInterval(function() {
      if(elementRGB[0] == 255 && elementRGB[1] == 255 && elementRGB[2] == 255) {
        element.style.display = "none";
        clearInterval(interval);
      }else {
        elementRGB.forEach(function(number, i) {
          var x = elementRGB[i] + 5;
          elementRGB[i] = Math.min(x, 255);
        });
        element.style.background = 'rgb(' + elementRGB[0] + ", " + elementRGB[1] + ", " + elementRGB[2] + ")";
        //...this can be commented out
        element.style.height = parseInt(element.style.height) - incH + "px";
      }
    }, 100);
  }
  animate(element);
</script>

Because <p> have a display value of block, they have line spaces before and after them causing a jump at the end of the <div>'s height fading; text nodes, however, are not displayed with the value of block so they are used.

Upvotes: 1

Related Questions