使用jQuery无效时将宽度从100％更改为auto时的css转换

Question

我在页面底部有一个栏，当我滚动页面时，我希望它与内容需要的一样宽并固定在底部。

像这样：

但是当它击中页脚时，我希望它能够滑出来覆盖整个页面宽度。像这样：

除了如何让它变宽之外，我已经解决了所有问题。现在，当滚动到达页面的正确位置以进行加宽时，我发生了js事件。然后我解雇了这个：

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

一旦我向上滚动并希望酒吧再次变小，我就开火了：

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

在我的CSS中我有这个：

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

现在除了过渡效果之外它都有效。酒吧只是快速到另一个大小blipps。为什么过渡不起作用？

编辑：我用它来解决页脚栏停止问题： Stop fixed position at footer

Answer 1

您无法转换为自动，您需要使用值，因此您可以尝试这样的操作。您为元素指定宽度，然后将其更改为具有100％宽度的父容器的宽度：

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>