Animate a div's width going from pixels to auto

Question

I have a horizontal navigation div#nav that contains li element links. I have a .closed class that gives my div a width of lets say 100px which only shows the first li. When I remove the .close my div shows all my li links. When I click on the first li and remove the class the div falls into its normal width size and that's what I want which is good. But how can I make it transition or animate instead of jumping into place?

<div id="nav" class="closed">
  <ul>
     <li>Link 1: click Me</li>
     <li>Link 2</li>
     <li>Link 3</li>
  </ul>
</div>

possible duplicate of [CSS transition height: 0; to height: auto;](http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto) — cimmanon, Mar 07 '14 at 17:20
only possible with min-width http://stackoverflow.com/questions/21750418/css3-height-transition-on-an-absolute-positioned-div-to-overflow-auto-fails/21750488#21750488 — Mabedan, Mar 07 '14 at 17:24

score 0 · Answer 1 · answered Mar 07 '14 at 17:26

0

Add following properties to your closed class,

 .closed 
 {
 -webkit-transition: all 0.6s ease-out;
 -moz-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
  }

Read more from here http://www.w3schools.com/css/css3_transitions.asp

answered Mar 07 '14 at 17:26

durgesh.patle

710
6
24

Ok it seems that this will only work if my div#nav has a set width without the .closed. I don't want to define pixels as the nav links will be loaded by server and I can't set a fixed pixel. – user3376065 Mar 07 '14 at 18:56

score 0 · Accepted Answer · answered Apr 12 '14 at 00:40

It looks like the issue has to do with the fact that animation requires an end point, I have to define how many pixels I want to to animate. I was trying to create a dynamic menu that would calculate this on its own, I ended up writing a function that considers all the margins and paddings between the link elements as well as the changes for different screen sizes. It would correctly calculate the pixels needed and would insert it into the animation code for me.

There is another way, see my answer – iamnotsam Apr 12 '14 at 04:15 — iamnotsam, Apr 12 '14 at 04:15

score 0 · Answer 3 · answered Apr 12 '14 at 04:17

I believe this meets your requirements

http://jsbin.com/colar/5/edit?html,css,js,output

I am doing a toy implementation of toggleClass, you can use more sophisticated JS

Here is the heart of it

#nav{
  display: inline-block;
  overflow: hidden;
  background: pink;
  max-width: 100%;
  transition: all 1s ease-in-out;
}
#nav.closed { max-width: 100px; }
#nav ul{
  padding: 0;
  display: inline;
  white-space: nowrap;
}
#nav li{ background: yellow; display: inline-block; cursor: pointer; width: 100px; }

Animate a div's width going from pixels to auto

3 Answers3