Dimensione dell'elemento di transizione causata dalle modifiche del contenuto

Question

Ho un pulsante che contiene del testo. Quando lo premi, il testo cambia. Questo cambia la larghezza del pulsante. Sarebbe bello se si potesse passare il cambio di larghezza di un elemento con qualcosa di simile:

#el { 
    transition: width 150ms ease-out; 
} 

Naturalmente, che funziona solo quando si modifica in modo esplicito la proprietà width.

Qualcuno sa di un elegante modo per ottenere questo effetto? Here's a (yet-to-function) fiddle to hack away at.

Answer 1

Provare this fiddle che utilizza jQuery.

$('button').click(function() { 
    var width = $(this).css('width'); 
    var height = $(this).css('height'); 
    $(this).html('Hello, World!'); 
    var newWidth = $(this).css('width'); 
    $(this).css({'width': width, 'height': height}); 
    $(this).animate({'width': newWidth}, 1000); 
});​ 

Answer 2

Immagino che questo 'impossibile, perché il browser non può ottenere la larghezza obiettivo esatta; Supponiamo che abbia ottenuto il valore prima della transizione, ma in quel momento il pulsante ha raggiunto la larghezza! Forse esiste il tansition e non possiamo vederlo. quindi è necessario conoscere la larghezza di destinazione, js

Answer 3

Con Maurice's answer, il testo del pulsante è passato a una seconda riga, che è stata modificata agganciando l'altezza del pulsante al suo originale altezza. utilizzare invece

button { 
    white-space: nowrap; 
} 

modo che il testo del pulsante rimane su una linea e viene mostrato mentre in fase di transizione. Quindi il codice non ha più a che fare con l'altezza del pulsante, in modo che possa diventare più semplice:

$('button').click(function() { 
    var width = $(this).css('width'); 
    $(this).text('Hello, World!'); 
    var newWidth = $(this).css('width'); 
    $(this).css({'width': width}); 
    $(this).animate({'width': newWidth}, 400); 
}); 

http://jsfiddle.net/2rr54vp2/1/