绝对定位无序列表上的宽度转换

Question

我想为无序列表的宽度设置动画。宽度决定是否显示与图标相关联的文本（在 fiddle 中由某些字符表示）。基本上，如果显示跨度，菜单的宽度就会增加——我想为这个动作制作动画。

要展开菜单，请按列表中的第一个按钮。 This is the fiddle。

这是 jsFiddle 的一小段摘录 -

<ul class="nav main-menu">
    <li>
        <a href="#" id="btnExpandNav">
             <i class="fa fa-sliders">A</i>
              <span>SEARCH</span>
        </a>
     </li>
</ul>

这是我的 css

ul
{
    background-color: yellow;
    position: absolute;

    -webkit-transition: width 1600ms ease;
    -moz-transition: width 1600ms ease;
    -ms-transition: width 1600ms ease;
    -o-transition: width 1600ms ease;
    transition: width 1600ms ease;
}

Answer 1

您可以将时间跨度参数传递给 show() 函数。喜欢 show(1000).

这是一个片段

var isNavExpanded = false;

$(document).ready(function() {
  //nothing

  initializeAppUIComponents();
});

function initializeAppUIComponents() {
  navMenuChangeStateHandler(false);

  $('#btnExpandNav').click(function() {
    navMenuChangeStateHandler();
    setSubMenuItems();
  });
}

function navMenuChangeStateHandler(specificState) {
  if (specificState != null)
    isNavExpanded = !specificState;

  if (isNavExpanded)
    $('#mainNavCol > .main-menu > li > a > span').hide();
  else {
    $('#mainNavCol > .main-menu > li > a > span').show(1000);
  }

  isNavExpanded = !isNavExpanded;
}

ul {
  background-color: yellow;
  position: absolute;
}
li {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="mainNavCol">
  <ul class="nav main-menu">
    <li>
      <a href="#" id="btnExpandNav"><i class="fa fa-sliders">A</i><span class="magictime slideLeftRetourn">SEARCH</span></a>
    </li>
    <li>
      <a href="#"><i class="fa fa-sliders">B</i><span class="magictime slideLeftRetourn">Supply chain</span></a>
    </li>
    <li>
      <a href="#"><i class="fa fa-gear">C</i><span class="magictime slideLeftRetourn">Warehouse</span></a>
    </li>
    <li>
      <a href="#"><i class="fa fa-heart">D</i><span class="magictime slideLeftRetourn">Shipment</span></a>
    </li>
  </ul>
</div>

绝对定位无序列表上的宽度转换

Width transition on a absolute positioned unordered list

css

css-transitions

transition