Animate width to fit-content

Question

I need to animate a div from a width of 0 (initial) to a width fit-content (a width that is the same as the width of its content)

$('div').css('width', 'fit-content');

However, if I do this the animation

transition: width .5s ease-in-out;

doesn't work anymore. So the question is how can I animate just to fit the content ?

UPDATE: I found the solution here (DEMO

grab the width in px of the parent and animate with px value instead of fit-content — Eric, Jan 20 '16 at 15:45
I am not sure you can animate a value like that. Why not try something like this: https://jsfiddle.net/yzugzf3h/3/ — AtheistP3ace, Jan 20 '16 at 15:45
In my case that doesn't work because multiple elements can be in the parent: [DEMO](https://jsfiddle.net/yzugzf3h/4/) — Jeanluca Scaljeri, Jan 20 '16 at 15:55
I found the solution and updated my post. Thank for helping!! — Jeanluca Scaljeri, Jan 20 '16 at 16:02

score 0 · Answer 1 · answered Jan 20 '16 at 16:11

0

You can do this:

setTimeout(function () {
    $('div').css('width', $('div').find('span').width() + 'px');
}, 1000);

like this JSfiddle: JSfiddle

answered Jan 20 '16 at 16:11

Tariq

There are a few ways this could be enhanced, like switching to the actual fit-content value once the animation completes, or restarting the animation if something in the window is resized. Those might not always be necessary, though. – Katana314 Jan 20 '16 at 19:13

1 Answers1