我有一个表单元格，我想让它在页面加载几秒钟后逐渐消失。设置不透明度的动画不起作用，因为它留下了一个空白，以及设置显示选项的动画，这不是渐进的。使用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或其他属性，以确定其不断变化的高度。请记住将+ "%"添加到1的line-height属性中。它是作为字符串的属性，以及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，因此使用它们。