动画 div 的宽度从像素到自动

Posted 2023-03-06

【中文标题】动画 div 的宽度从像素到自动

【英文标题】：Animate a div's width going from pixels to auto

【发布时间】：2014-04-10 23:11:52

【问题描述】：

我有一个包含 li 元素链接的水平导航 div#nav。我有一个 .close 类，它给我的 div 一个宽度，比如说 100px，它只显示第一个 li。当我删除 .close 我的 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>

【问题讨论】：

你能提供所有相关的代码，也许还有一个 jsfiddle 吗？！

CSS transition height: 0; to height: auto; 的可能重复项

仅适用于最小宽度***.com/questions/21750418/…

【参考方案1】：

将以下属性添加到您的封闭类中，

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

从这里阅读更多信息http://www.w3schools.com/css/css3_transitions.asp

【讨论】：

好吧，这似乎只有在我的 div#nav 有一个没有 .close 的设置宽度时才有效。我不想定义像素，因为导航链接将由服务器加载，我无法设置固定像素。

【参考方案2】：

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

【讨论】：

还有一种方法，看我的回答

【参考方案3】：

我相信这符合您的要求

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

我正在做一个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;