如何在可扩展菜单中正确显示标题？

Question

我正在尝试在 jQuery 和 CSS3 中做一个可扩展的菜单，这里是小提琴：

http://jsfiddle.net/mNcuQ/3/

当您单击滑动条时，会显示标题部分。但我担心它看起来不正确。我要做的是当.expanded 类处于活动状态并且修改了滑动条的宽度（过渡完成）时，然后显示具有淡入效果的菜单标题。就像我现在所做的那样，菜单的标题不会重复display: inline-block。当然我错过了什么......

您有什么想法或建议吗？在这种情况下使用什么更好：CSS3 过渡 或 jQuery 动画？

这是小提琴的代码：

HTML

<div id="sidebar"> 
    <a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </a>

    <nav id="nav" class="navigation" role="navigation">
        <ul class="unstyled">
            <li class="active" data-section="1"><i class="icon-home"></i>  <span>Home</span>

            </li>
            <li data-section="2" class=""><i class="icon-rocket"></i>  <span>Services</span>

            </li>
            <li data-section="3" class=""><i class="icon-laptop"></i>  <span>Projects</span>

            </li>
            <li data-section="6" class=""><i class="icon-money"></i>  <span>Price</span>

            </li>
            <li data-section="4" class=""><i class="icon-pencil"></i>  <span>Team</span>

            </li>
            <li data-section="5" class="last"><i class="icon-envelope"></i>  <span>Contact</span>

            </li>
        </ul>
    </nav>
</div>

JS

$(document).ready(function ($) {
    $('#sidebar').click(function () {
        $('html').toggleClass('expanded');
    });
});

CSS

#sidebar {
    background-color: #151515;
    height: 120%;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 50px;
    z-index: 2;
    cursor:pointer;
    overflow-y: hidden;
}
#nav {
    margin-top: 80px;
}
#nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#nav ul li i {
    font-size : 15px;
}
#nav ul li {
    color: #F1F1F1;
    cursor: pointer;
    display: inline-block;
    line-height: 22px;
    filter: alpha(opacity=40);
    font-size: 16px;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 100;
    opacity: .4;
    padding: 8px 0 8px 15px;
    text-transform: uppercase;
    width: 70%;
}
#sidebar {
    -webkit-transition: width 500ms ease;
    -moz-transition: width 500ms ease;
    -ms-transition: width 500ms ease;
    -o-transition: width 500ms ease;
    transition: width 500ms ease;
}
#nav ul li.active {
    filter: alpha(opacity=100);
    opacity: 1;
}
#nav ul li.last {
    padding-right: 0px;
}
#nav li span {
    display: inline-block;
    font-size: 14px;
    font-size: 1.4rem;
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding-left: 10px;
    width: 0;
}
.btn-navbar {
    cursor: pointer;
    filter: alpha(opacity=40);
    float: left;
    margin: 20px 5px 10px;
    opacity: .4;
    padding: 7px 10px;
}
.btn-navbar .icon-bar {
    background-color: #F5F5F5;
    border-radius: 1px 1px 1px 1px;
    box-shadow: none;
    display: block;
    height: 2px;
    width: 18px;
}
/* Expanded Nav Styling */
 .expanded #container {
    left: 100px;
    transform: translate3d(50px, 0px, 0px) scale3d(1, 1, 1);
}
.expanded #sidebar {
    width: 150px;
}
.expanded #nav li {
    width: 90%;
}
.expanded #nav li span {
    display: inline-block;
    height: auto;
    opacity: 1;
    overflow: visible;
    width: auto;
}

如果您需要更多信息，请告诉我，我会编辑帖子。

Answer 1

也许使用转换延迟？

Fiddle（将相关的 css 类移至底部）

#nav li span {
  display: inline-block;
  font-size: 14px;
  font-size: 1.4rem;
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding-left: 10px;
  width: 0;
  transition:opacity 0.5s ease; // ease opacity
}

.expanded #nav li span {
  display: inline-block;
  height: auto;
  opacity: 1;
  overflow: visible;
  width: auto;
  transition-delay: 500ms; //delay transition by the same amount of sidebar width transition time
}

Answer 2

问题是您展开的容器太小，无法正确定位标题，将其放大一点，它会起作用

.expanded #sidebar {
  width: 180px;
}