Question

我有这个div

<div id="view_album">
    View Photo
</div>

和css

#view_album {
    text-align: right;
    width: auto;
    display: inline-block;
    background: #005cb9;
    color: white;
    box-sizing: border-box;
    padding: 10px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
#view_album:hover {
    width: 100%;
}

是否可以将宽度从auto设置为动画？最终宽度为100％不起作用但如果我将初始宽度设置为特定值（如100px），则可以正常工作。但是我需要它自动，因为div里面的文字“查看照片”可以是其他文字，也就像那些更长的文字。

开this site我正在努力：

如您所见，带有“查看相册”的div具有特定宽度115px。然后动画到100％。但是，如果我改变里面的文字，比如'Abc'，它明显比View Album短，并且不需要115px的宽度。

这就是我自动需要它的原因。

Answer 1

首先，将ID更改为类，因为您为所有专辑封面重复相同的ID。

您可以使用自动宽度，并在加载网站后，运行jQuery脚本并将当前宽度添加到css：

$(document).ready(function(){
    $.each($('.view_album'), function(){
        $(this).css('width', $(this).width() + 'px');
    }
});

Answer 2

我不认为CSS可以按照您想要的方式制作动画/进行转换。您必须使用脚本来设置初始宽度显式。但是我们必须知道浏览器计算的宽度（在渲染元素后从样式width:auto），这可以使用getComputedStyle或仅通过css方法轻松完成在jQuery中。这里重要的是你必须通过CSSRule修改样式，而不是通过元素的style属性。我不确定为什么会这样，但看起来像CSS的工作方式。以下是查找规则#view_album并将width设置为特定值的脚本，以便悬停可以使其过渡良好：

var ss = document.styleSheets;
for(var i = 0; i < ss.length; i++){
  var rules = ss[i].cssRules || ss[i].rules;
  var br = false;
  for(var j = 0; j < rules.length; j++) {
    if(rules[j].selectorText == '#view_album'){            
        rules[j].style.width = $('#view_album').css('width');
        br = true;
        break;
    }
  }
  if(br) break;
}

Demo.

注意：这样做不会再对你的元素设置width:auto，所以你不应该动态更改该元素的文本（我想这不是你的用例）。如果您必须动态更改它并且宽度应自动展开/折叠，您可以在设置text / innerHTML之前尝试先设置width:auto。

以下是 Another version ，您可以更改font-size的{{1}}，以便相应地调整宽度。

动画宽度从自动到100％？

2 个答案:

Demo.