Jquery 设置div宽度从像素到自动的动画

我有一个包含li元素链接的水平导航divnav。我有一个.closed类，它给我的div一个100px的宽度，它只显示第一个li。当我删除时。关闭我的div将显示我的所有li链接。当我点击第一个li并移除类时，div会变成它的正常宽度大小，这就是我想要的，这很好。但是我怎样才能使它过渡或动画化，而不是跳到位呢

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

---

将以下属性添加到关闭的类中

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

---

从这里阅读更多内容

看起来问题与动画需要一个端点这一事实有关，我必须定义要设置多少像素的动画。我试图创建一个动态菜单，可以自己计算，最后我编写了一个函数，考虑链接元素之间的所有边距和填充，以及不同屏幕大小的变化。它将正确计算所需的像素，并为我将其插入动画代码。

我相信这符合您的要求

我正在做一个toggleClass的玩具实现，你可以使用更复杂的JS

这是它的核心

#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; }

---

你能提供所有相关的代码和一个JSFIDLE吗？！可能的复制只可能与最小宽度确定似乎这将只工作，如果我的divnav有一个没有.closed设置宽度。我不想定义像素，因为导航链接将由服务器加载，我无法设置固定像素。还有一种方法，请参阅我的答案