Kann ich Animation/Effekt auf div resize setzen?

Question

Ziel: Animieren div auf Inhalt Größe ändern.

Gegeben:

1. Div Höhe und Breite sind nicht angegeben.
2. Div-Größe hängt von der Inhaltsgröße ab.
3. Wenn sich die Inhaltsgröße ändert, ändert sich auch die div-Größe (ohne Animation, die Größe ändert sich innerhalb von 0,5FPS).

Frage: Wie bewerbe ich mich Animation/Effekt auf div, wenn es dynamisch Größe ändert, in Abhängigkeit vom Inhalt?

HINWEIS: ein gutes Beispiel dafür ist @gmail (Karte auf dem Erfolg der nächsten ändert die Größe)

Answer 1

ein max-height Nehmen und einen max-width und eine Anzeige Eigenschaft inline-block.

div { 
display: inline-block; 
background:red; 
transition: max-height 1s, max-width 1s; 
max-height:0; 
max-width:0; 
} 
div:hover { 
max-height:200px; 
max-width:400px; 
} 

<div>yada yada yada</div> 

Answer 2

Es gibt einen Weg dafür. Sie müssen ein einziges verstecktes Element für diesen Weg verwenden. Sie müssen den Inhalt in beiden Elementen festlegen. versuchen den folgenden

HTML:

<span id="hiddenElement"></span>

<div id="displayElement"></div>

CSS:

#hiddenElement 
{ 
    max-width: 200px; 
    opacity: 0; 
    /* use some other properties to completely hide. but do not give width:0 */ 
} 

#displayElement 
{ 
    width: auto; 
    height: auto; 
    max-width: 200px; 
    -webkit-transition: width 0.5s, height 0.5s; /* Safari */ 
    transition: width 0.5s, height 0.5s; 
    border: 1px solid black; 
    over-flow: hidden; 
} 

JS-Methode:

function setContent(content) 
{ 
    $("#hiddenElement").text(content); 
    $("#displayElement").text(content); 
    $("#displayElement").width($("#hiddenElement").width()); 
    $("#displayElement").height($("#hiddenElement").height()); 
}