Animate width from auto to 100%? - html

Question

I have this div
<div id="view_album">
View Photo
</div>
And a 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%;
}
Is it possible to animate the width from auto to something? A final width of 100% isn't working but if I set the initial width to a specific value like 100px and so, it works. But I need it auto since the text inside the div, 'View Photo', can be other text, too like something longer than that.
On this site I'm working on:
As you can see, that div with 'View Album' has a specific width of 115px. Then animate to 100%. But if I change the text inside like, 'Abc', which is obviously shorter than View Album and does not need a 115px of width.
That's why I need it auto.

Answer 1

First, change ids to classes, since you are repeating same id for all album covers.
You can use auto width and after site is loaded, run jQuery script and add current width to css:
$(document).ready(function(){
$.each($('.view_album'), function(){
$(this).css('width', $(this).width() + 'px');
}
});

Answer 2

I don't think CSS can animate/do transitioning in the way you want. You have to use script to set the initial width explicitly. However we have to know the width which is calculated by the browser (from the style width:auto after the element is rendered), this can be done easily using getComputedStyle or simply by the css method in jQuery. The important thing here is you have to modify the style via the CSSRule, not via the style property of the element. I'm not sure why it is but looks like that's how CSS works. Here is the script to find the rule #view_album and set the width to a specific value so that the hovering can make it transition well:
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.
NOTE: Doing so won't set the width:auto on your element any more, so you should not change the text of that element dynamically (I think this is not your use case). If you have to change it dynamically and the width should expand/collapse automatically, you can try setting width:auto on it first before setting the text/innerHTML.
Here is Another version allowing you to change the font-size of the #view_album so that the width is adjusted accordingly.