Utwórz Div Rozwiń płynnie

Question

Używam JavaScript, aby rozwinąć div, ale gdy zawartość jest rozwinięta, jest bardzo gwałtowna i w najlepszym przypadku wysoce nieatrakcyjna. Zastanawiałem się, czy istnieje sposób na to, aby ten div rozwijał się wolniej i bardziej wizualnie, niż BLAM. Teraz skończę.

<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"> 

Answer 1

Naprawdę nie ma sensu odnawiać koła. Możesz to zrobić całkiem łatwo dzięki slidetoggle Jquery'ego. Oto strona: http://api.jquery.com/slideToggle/

Answer 2

Sztuką jest z dołączanie i usuwanie klas w JavaScript ... A mocowania przejścia CSS3 takiego:

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

ten dotyczy przejścia można kontrolować prędkość o wszystkim twoi div. Oczywiście możesz wybrać elementy DOM, aby zastosować je do siebie.

A potem te dwie funkcje jquery użyję są

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

Ale jak zauważył, że nie może używać jQuery! Więc tu!

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

Gdzie „#object” jest obiektem są kierowane i „.removeThis” jest klasą dodawania i usuwania z atrybutem klasy w tagu Dom. Oto, jak to wygląda w css.

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

.removeThis { 
    height: 0; 
} 

Zakładając, że chcesz przesuwać w górę iw dół. Inną sztuczką jest użycie krycia lub wyświetlania: none i display: block. Ale baw się. Mam nadzieję, że to pomoże!

Edytuj od 2012: Edytuj Od 2012 roku: Ponieważ używasz JavaScript, musisz poprosić o pracę w głównym wątku, możesz wykorzystać wątek kompozytora, animując zamiast tego transformację. Oznacza to, że możesz dowiedzieć się, jak uciec od animowania właściwości stylu wysokości.

Answer 3

Myślę, że najlepszą sztuczką jest użycie właściwości CSS overflow:hidden w dziale. Spowoduje to ukrycie zawartości, która jest poza wysokością lub szerokością div. Następnie możesz łatwo zwiększyć i zmniejszyć wysokość podziału dzięki płynnemu przejściu CSS.

Możesz przeczytać the tutorial here