css transition when changing width from 100% to auto using jQuery not working

Question

I have a bar att the bottom of the page that when I scroll the page I want it to be as wide as the content needs it to be and fixed to the bottom.

Like this:

But when it hits the footer I want it to niecely slide out to cover the whole page-width. Like this:

I have solved everything except how to make it widen nicely. Now I have a js-event happening when the scroll reach the right position of the page for the widening. I then fire this:

$('#bar').css('width' : '100%');

As soon as I scroll up from it and want the bar to be small again I fire this:

$('#bar').css('width' : 'auto');

In my css i have this:

-webkit-transition: width 1s; /* Safari */
transition: width 1s;

Right now it all works EXCEPT the transition effect. The bar just blipps really quick to the other size. Why is the transition not working?

EDIT: Am using this to solve the footer bar stoping-issue: Stop fixed position at footer

[You can't cant transition to 'auto'](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) — Turnip, Oct 24 '17 at 12:26
Possible duplicate of [How can I transition height: 0; to height: auto; using CSS?](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) — Scoots, Oct 24 '17 at 12:29
You can use an absolutely-positioned pseudo-element that serves as a background, whose left/right cardinal coordinates are updated when the user scrolls. However, for this solution to be formulated, you will have to share some kind of code/markup in the form of an MCVE. — Terry, Oct 24 '17 at 12:30
lol that was it. just change it to ### px and now it works. tnx — Brainmaniac, Oct 24 '17 at 12:30

score 0 · Accepted Answer · answered Oct 24 '17 at 12:35

You cannot do transition to auto you need to use values, so you may try something like this. You specify a width to the element then you change it to the width of the parent container which is having a 100% width:

var w = $('.bar').width();
$('.bar').css('width', w);

$(".bar").on('click', function() {
  $('.bar').css('width', $("body").outerWidth());
})

$(".reduce").on('click', function() {
  $('.bar').css('width', w);
})

body {
  text-align: center;
}

.bar {
  box-sizing: border-box;
  padding: 20px;
  background: red;
  display: inline-block;
  transition: width 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bar">click to expand</div>
<div class="reduce">click to reduce</div>

css transition when changing width from 100% to auto using jQuery not working

1 Answers1