html - 使表格单元格逐渐消失，不留空格

我有一个表格单元格和ID，想让它在页面加载后几秒钟后逐渐消失。对不透明度进行动画处理不起作用，因为它会留出空白，并对显示选项（不是渐进的）进行动画处理。如何使用CSS类执行此操作？（或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;
    }

最佳答案

首先为不透明度设置动画，直到表格单元变为空白，然后在几秒钟后使用JavaScript将表格单元的.style.display设置为"none"

这是示例代码（您需要针对表格单元格和行对其进行编辑）：

该代码现在可以在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，所以它们前后都有行距，从而导致<div>高度衰落结束时出现跳跃。但是，文本节点不会显示为block的值，因此将使用它们。

关于html - 使表格单元格逐渐消失，不留空格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30990340/