html - 动画宽度从自动到 100%？

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我正在从事:

如您所见，带有“View Album”的 div 的特定宽度为 115px。然后动画到 100%。但是，如果我更改里面的文本，例如“Abc”，它显然比查看相册短，并且不需要 115 像素的宽度。

这就是为什么我需要它自动。

Answer 1

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

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

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