CSS / JS: anima elemento in linea su cambio di testo

Quando il testo di un elemento in inline cambia, solitamente si modifica anche la width o l’ height calcolate.

Di solito è banale transition le modifiche alle proprietà con i CSS, ad esempio aggiungendo una transition per cambiare il background-color di background-color di un elemento al passaggio del mouse.

Tuttavia, le dimensioni degli elementi in inline sono davvero difficili. Una semplice proprietà di transition non anima la modifica nella width calcasting.

Visualizza esempio e cliccando qui: https://jsfiddle.net/mz103/59s42ys4/ o visualizzandolo qui sotto:

 $("div").on("click", function() { $(this).text("Although my width changes, it is not aniamted."); }); 
 div { display: inline-block; background-color: red; padding: 8px 16px; transition: width 0.3s; // Notice, this doesn't transition the width upon change. } 
  
Click me.

Come, quando cambia il testo di un elemento in inline , possiamo animare queste modifiche?

Ecco un aggiornamento: https://jsfiddle.net/ky3c5Lec/3/

 $("div").on("click", function() { //get the current Dimensions, as Start-value for the animation var $this = $(this), sw = $this.width(), sh = $this.height(); $this.text("New text"); var tw = $this.width(), th = $this.height(); $this.css({ //since jQuery.animate() doesn't have sth. like Tween.from() //we have to reset the styles to the initial values width: sw, height: sh }).animate({ //and then animate width: tw, height: th }, function(){ //and when the animation is done, we clean up after ourselves $this.css({ width: "", height: "" }); }) }); 

Potresti provare un po ‘di animazione jQuery:

 function changeText(el) { el.animate( { opacity: 0 }, { duration: 'slow', complete: function () { $(this).text('New Text'); $(this).animate({opacity: 1}, 'slow'); } }); } 

Ecco un violino .

Suppongo che avrai bisogno di due elementi per ottenere questo risultato elegantemente:

 $(".inner").on("click", function() { var $this = $(this); var $par = $this.parent(); $par.css({ width: $par.width() }); $this.text("New text"); $par.css({ width: $this.outerWidth() }); }); 
 .inner { display: inline-block; padding: 8px 16px; white-space: nowrap; } .outer { display: inline-block; transition: width 300ms ease-in-out; background-color: red; overflow: hidden; } 
  
Here's some text.