使表格單元格逐漸消失，不留空格

我有一個表格單元格和標識符，使其在頁面加載後的幾秒鐘內逐漸消失。動畫不透明不起作用，因爲它留下了一個空白區域，並且動畫顯示選項不是漸變的。我怎樣才能做到這一點，使用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; 
    }

來源

2015-06-22 Leonardo Mutti

只是提到：你使用了兩次id'errore'，這是不合法的html。另外，請添加您嘗試使用不透明度動畫的代碼。 – jhinzmann

@jhinzmann是的，你現在的位置是： –

第一動畫的不透明度，直到表單元格變爲空白，然後使用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，因此可以使用它們。

來源

2015-06-22 21:48:41 JavaScriptArray

它幾乎是完美的，但重點是逐漸消失，即使從絕對值顯示變爲無值。我試圖做到這一點動畫的高度，但它沒有奏效 –

使表格單元格逐漸消失，不留空格

回答

相關問題