使Div可以平滑地展開

我使用Javascript來擴展div，但是當內容擴展時，它非常突兀，最多也很不引人注目。我想知道是否有辦法讓這個div擴展得更慢，更多的是可視化擴展，然後是BLAM。現在我完成了。使Div可以平滑地展開

<script language="javascript"> 
function toggle_profile() { 
    var ele = document.getElementById("toggleProfile"); 
    var text = document.getElementById("displayProfile"); 
    if(ele.style.display == "block") { 
      ele.style.display = "none"; 
     text.innerHTML = "View Profile"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "Hide Profile"; 
    } 
} 
         </script> 

         <a id="displayProfile" href="javascript:toggle_profile();">View Profile</a></p> 
         <br /> 
        <div id="toggleProfile" style="display: none">

來源

2012-10-26 Morgan Green

這絕對是可能的，但如果你使用普通的JavaScript你必須通過修改寬度或使用某種計時器的高度，以創建自己的動畫。如果你想做這樣的事情，我會推薦一個像jQuery這樣的框架。它使它更容易。 – j08691

爲什麼你不使用jQuery？這難道不會幫助你更輕鬆地寫出你的例子嗎？ – ChuckE

在重新發明車輪方面，Theres確實沒有意義。你可以用Jquery的slidetoggle很容易地做到這一點。這裏是頁面：http://api.jquery.com/slideToggle/

來源

2012-10-26 20:44:49

訣竅是附加和Javascript中刪除類的......和附加這樣的CSS3過渡：

div { 
    -webkit-transition: height .25s ease; 
     -moz-transition: height .25s ease; 
      transition: height .25s ease; 
}

此應用過渡，你可以控制速度的所有你的div。當然，您可以選擇將其應用於自己的DOM元素。

然後我會使用兩個jQuery函數是

$("#object").addClass("removeThis"); //hide 
$("#object").removeClass("removeThis"); //show

但正如指出的，你可以不使用jQuery！所以在這裏！

document.getElementById("object").className = ""; 
document.getElementById("object").className = "removeThis";

其中「#object」是你的目標對象，而「.removeThis」是要添加和在DOM標籤的類屬性移除類。下面是它在css中的樣子。

#object { 
    height: 200px; 
    /* ignoring other CSS */ 
} 

.removeThis { 
    height: 0; 
}

假設您希望它向上和向下滑動。另一個技巧是使用不透明度，或display：none和display：block。但玩耍。我希望這有幫助！

自2012年起編輯：由於您使用的是JavaScript，因此您需要在主線程上完成工作，您可以通過在轉換上進行動畫處理來利用合成器線程。那就是如果你能想出如何擺脫高度風格屬性的動畫效果。

來源

2012-10-26 20:46:18 Jim

如果你添加了原始的javascript，那就太好了，因爲不需要jquery添加/刪除類並使用CSS3轉換（並且OP沒有標記jquery）。 – rgthree

哎呀，這是一個很好的觀點，我會跳上這一點。 – Jim

我沒有意識到CSS是在c/C++中本地實現的。好答案！ –

我認爲最好的訣竅就是使用CSS overflow:hidden屬性。這會隱藏超出div高度或寬度的內容。然後，您可以輕鬆地通過平滑的CSS過渡來增加和減少分區的高度。

您可以閱讀the tutorial here

來源

2013-10-24 17:10:30 Kaushik

使Div可以平滑地展開

回答

相關問題