Question

我有一个包含li元素链接的水平导航div＃nav。我有一个.closed类，给我的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>

Answer 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

Answer 2

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

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

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

3 个答案: