Question

我有一个表格单元格和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; 
    }

Answer 1

首先为不透明度设置动画，直到表格单元格变为空白，然后在几秒钟后使用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的值，因此会使用它们。

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

1 个答案: