Transition element size caused by content changes

Question

I have a button that has some text in it. When you press it, the text changes. This makes the button's width change. It would be great if one could transition the change of an element's width with something like this:

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

Of course, that only works when you explicitly change the width property.

Does anyone know of an elegant way to achieve this effect? Here's a (yet-to-function) fiddle to hack away at.

score 2 · Answer 1 · answered Oct 31 '12 at 08:40

2

Try this fiddle that does it using 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);
});

answered Oct 31 '12 at 08:40

Maurice

27,582
5
49
62

This is kinda on the right track, but it needs to be tweaked so that the text doesn't "pop" -- I'm playing around with it. I'd *really* like to see something with minimal javascript, though. – namuol Oct 31 '12 at 08:53
Very helpful, thanks! (In my case I added `white-space: nowrap;` to smooth out the effect.) – Joel Farris Nov 08 '16 at 17:42

score 1 · Answer 2 · edited May 23 '17 at 11:45

With Maurice's answer, the button's text overflowed to a second line, which was worked around by forcing the height of the button to its original height. Instead, use

button {
    white-space: nowrap;
}

so that the button's text stays on one line and is shown while in transition. Then the code no longer has to deal with the button's height, so it can become simpler:

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

score 0 · Answer 3 · answered Sep 10 '13 at 04:09

I guess this' impossible, because the browser can't get the exact target width; Let's suppose it got the value before transition, but at that time ,the button has arrived the width! Maybe the tansition exists, and we can't see it. so you need an initial width, and you need to know the target width too, us js

Transition element size caused by content changes

3 Answers3

Linked