İçerik değişikliklerinden kaynaklanan geçiş öğesi boyutu

Question

İçinde bir metin bulunan bir düğme var. Bastığınızda, metin değişir. Bu, düğmenin genişliğini değiştirir. Tabii

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

, sadece çalıştığını açıkça width özelliğini değiştirdiğinizde: Bir böyle bir şeyle eleman genişliğinin değişimi geçiş olabilir, çok iyi olurdu.

Bu efekti elde etmek için zarif yolunu bilen var mı? Here's a (yet-to-function) fiddle to hack away at.

Answer 1

jQuery'yi kullanan this fiddle'u deneyin.

$('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

Bu 'imkansız, çünkü tarayıcı tam hedef genişliğini alamıyor; Geçişten önce değeri aldığımızı varsayalım, ama o zaman düğme genişliğe ulaştı! Belki de tansür var ve onu göremeyiz. bu yüzden bir başlangıç ​​genişliğine ihtiyaç duyarsınız ve hedef genişliğini de bilmeniz gerekir, js

Answer 3

Maurice's answer ile düğmenin metni ikinci bir satıra taştı, düğmenin yüksekliğini orijinaline zorlayarak çalıştı. yükseklik. düğmenin metin tek satırda kalır ve geçiş sırasında gösterilen şekilde Bunun yerine,

button { 
    white-space: nowrap; 
} 

kullanın. Ardından kod artık düğmenin yüksekliği ile uğraşmak zorundadır, bu yüzden daha basit hale gelebilir:

$('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/