Aggiungi transizione CSS3 Espansione/compressione

Question

Come aggiungere una transizione di espansione/compressione?

http://jsfiddle.net/Bq6eK/1

Answer 1

Questa è la mia soluzione che regola l'altezza automaticamente: http://jsfiddle.net/9ccjE/

ho usato la soluzione che r3bel postato: Can you use CSS3 to transition from height:0 to the variable height of content?

Answer 2

questo dovrebbe funzionare, dovuto provare un po 'troppo ..: D

css3 animation jsfiddle

Answer 3

http://jsfiddle.net/Bq6eK/215/

Io non modificare il codice per questa soluzione, ho scritto il mio proprio invece. La mia soluzione non è esattamente quella che hai chiesto, ma forse potresti farcela con le conoscenze esistenti. Ho commentato anche il codice, quindi sai cosa sto facendo esattamente con le modifiche.

Come soluzione per "evitare l'impostazione dell'altezza in JavaScript", ho appena reso "maxHeight" un parametro nella funzione JS denominato toggleHeight. Ora può essere impostato nell'HTML per ogni div di classe espandibile.

Lo dirò in anticipo, non ho molta esperienza con i linguaggi front-end e c'è un problema in cui è necessario fare clic due volte sul pulsante "Mostra/nascondi" inizialmente prima dell'avvio dell'animazione. Sospetto che sia un problema con attenzione.

L'altro problema con la mia soluzione è che si può effettivamente capire cos'è il testo nascosto senza premere il pulsante mostra/nascondi semplicemente facendo clic sul div e trascinando verso il basso, è possibile evidenziare il testo che non è visibile e incollarlo in uno spazio visibile

Il mio suggerimento per un prossimo passo in cima a quello che ho fatto è di farlo in modo che il pulsante mostra/nascondi cambi dinamicamente. Penso che tu possa capire come farlo con ciò che già sembra sapere sul mostrare e nascondere il testo con JS.

Answer 4

Ecco una soluzione che non utilizza affatto JS. Utilizza invece checkboxes.

È possibile nascondere la casella di controllo con l'aggiunta di questo al vostro CSS:

.container input{ 
    display: none; 
} 

e quindi aggiungere un po 'di stile per farlo sembrare come un button.

Here's the source code that I modded.

Answer 5

OMG, ho cercato di trovare una semplice soluzione a questo per ore . Sapevo che il codice era semplice ma nessuno mi ha fornito quello che volevo. Quindi, finalmente, è arrivato il momento di lavorare su un codice di esempio e abbiamo creato qualcosa di semplice che chiunque non possa usare JQuery richiesto. Semplice javascript e css e html. Per far funzionare l'animazione devi impostare l'altezza e la larghezza o l'animazione non funzionerà. Trovato fuori nel modo più duro.

<script> 
     function dostuff() { 
      if (document.getElementById('MyBox').style.height == "0px") { 

       document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;"); 
      } 
      else { 
       document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;"); 
      } 
     } 
    </script> 
    <div id="MyBox" style="height: 0px; width: 0px;"> 
    </div> 

    <input type="button" id="buttontest" onclick="dostuff()" value="Click Me">