animare la larghezza di un elemento da 0 a 100%, con esso ed è involucro essendo solo larga quanto hanno bisogno di essere, senza una larghezza prefissata, in CSS3 o jQuery

Question

http://jsfiddle.net/nicktheandroid/tVHYg/

Quando bilico .wrapper, è bambino l'elemento .contents dovrebbe animare da 0px alla sua larghezza naturale. Quindi, quando il mouse viene rimosso da .wrapper, dovrebbe tornare a 0px. L'elemento .wrapper deve essere ampio solo quanto deve essere (consentendo a .contents di crescere), quindi .wrapper dovrebbe crescere in larghezza e ridursi in larghezza come fa .contents. Non dovrebbe esserci alcuna larghezza impostata per .contents. Sto usando CSS3, ma potrebbe essere realizzato in jQuery, sarebbe perfetto.

Il problema: Vedere il JSfiddle

1. .wrapper non è solo così ampio come ha bisogno di essere.
2. quando .contents cresce, quando è quasi al suo larghezza, salta giù alla riga successiva
3. Quando si libra al largo di .wrapper, .contents svanisce, quando dovrebbe animare fino a 0px

.wrapper { 
 
    display: inline-block; 
 

 
    height: 20px; 
 
    width: auto; 
 
    
 
    padding:10px; 
 
    
 
    background:#DDD; 
 
} 
 

 
.contents { 
 
    display:inline-block; 
 
    
 
    width:0%; 
 
    
 
    white-space:nowrap; 
 
    overflow:hidden; 
 
    
 
    background:#c3c; 
 
} 
 

 
.wrapper:hover .contents { 
 
    -webkit-transition: width 1s ease-in-out; 
 
    -moz-transition: width 1s ease-in-out; 
 
    -o-transition: width 1s ease-in-out; 
 
    transition: width 1s ease-in-out; 
 

 
    width:100%; 
 
}

<div class="wrapper"> 
 
    <span>+</span> 
 
    <div class="contents">These are the contents of this div</div> 
 
</div>

Answer 1

Penso di averlo capito. http://jsfiddle.net/tVHYg/4/

Animare al 100% fa sì che per avvolgere perché la casella è più grande della larghezza disponibile (100% meno il + e gli spazi lo seguono).

Invece, è possibile animare un elemento interno, di cui 100% corrisponde alla larghezza totale di .contents.

Answer 2

http://jsfiddle.net/tVHYg/5/

.wrapper { 
    background:#DDD; 
    padding:1%; 
    display:inline; 
    height:20px; 
} 


span { 
    width: 1%; 
} 

.contents { 
    background:#c3c; 
    overflow:hidden; 
    white-space:nowrap; 
    display:inline-block; 
    width:0%; 
} 



.wrapper:hover .contents { 
    -webkit-transition: width 1s ease-in-out; 
    -moz-transition: width 1s ease-in-out; 
    -o-transition: width 1s ease-in-out; 
    transition: width 1s ease-in-out; 

    width:90%; 
} 

Answer 3

non sono stato in grado di farlo funzionare senza specificare una larghezza ma il seguente css lavorato

.wrapper { 
    background: #DDD; 
    padding: 10px; 
    display: inline-block; 
    height: 20px; 
    width: auto; 
} 

.contents { 
    background: #c3c; 
    overflow: hidden; 
    white-space: nowrap; 
    display: inline-block; 
    visibility: hidden; 
    width: 1px; 
    -webkit-transition: width 1s ease-in-out, visibility 1s linear; 
    -moz-transition: width 1s ease-in-out, visibility 1s linear; 
    -o-transition: width 1s ease-in-out, visibility 1s linear; 
    transition: width 1s ease-in-out, visibility 1s linear; 
} 

.wrapper:hover .contents { 
    width: 200px; 
    visibility: visible; 
} 

io non sono sicuro che sarete in grado di ottenere funziona senza impostare una larghezza su di esso.

Answer 4

Ottenuto il lavoro passando la spaziatura e la larghezza.

JSFiddle: http://jsfiddle.net/tuybk748/1/

<div class='label gray'>+ 
</div><!-- must be connected to prevent gap --><div class='contents-wrapper'> 
    <div class="gray contents">These are the contents of this div</div> 
</div> 

.gray { 
    background: #ddd; 
} 
.contents-wrapper, .label, .contents { 
    display: inline-block; 
} 
.label, .contents { 
    overflow: hidden; /* must be on both divs to prevent dropdown behavior */ 
    height: 20px; 
} 
.label { 
    padding: 10px 10px 15px; 
} 
.contents { 
    padding: 10px 0px 15px; /* no left-right padding at beginning */ 
    white-space: nowrap; /* keeps text all on same line */ 
    width: 0%; 
    -webkit-transition: width 1s ease-in-out, padding-left 1s ease-in-out, 
     padding-right 1s ease-in-out; 
    -moz-transition: width 1s ease-in-out, padding-left 1s ease-in-out, 
     padding-right 1s ease-in-out; 
    -o-transition: width 1s ease-in-out, padding-left 1s ease-in-out, 
     padding-right 1s ease-in-out; 
    transition: width 1s ease-in-out, padding-left 1s ease-in-out, 
     padding-right 1s ease-in-out; 
} 
.label:hover + .contents-wrapper .contents { 
    width: 100%; 
    padding-left: 10px; 
    padding-right: 10px; 
}