使 table 单元格逐渐消失，不留空白

Question

我有一个 table 单元格，我想让它在页面加载后几秒钟内逐渐消失。动画不透明度不起作用，因为它留下了白色 space，以及动画显示选项，这不是渐变的。我该怎么做，使用 CSS class？（或 Javascript 函数或任何你建议我的）

这是我的代码：

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

提前致谢！

这是CSS部分

    @-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; 
    }

Answer 1

首先设置不透明度动画，直到 table 单元格变为白色 space，然后在几秒后使用 JavaScript 设置 [=38= 的 .style.display ] 单元格到 "none"

这是示例代码（您需要为 table 单元格和行编辑它）：

此代码现在可以在 Firefox 中运行，您可以选择注释掉 incH 及其补充：element.style.height...，这会使高度随着时间的推移而降低；对于其他元素，您可能希望改为编辑 line-height 或其他属性以确定它们的高度变化。请记住将 + "%" 添加到 line-height 属性中，因为：1. 它是一个属性作为字符串，以及 2. 它有一个要修改的单元。

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

因为 <p> 的显示值为 block，它们前后都有行 space，导致在 <div> 的末尾跳转高度衰减；但是，文本节点不显示 block 的值，因此使用它们。

使 table 单元格逐渐消失，不留空白

Make a table cell gradually disappear leaving no blank spaces

html

css

animation

html-table