SCSS转换上的文本重叠

Question

点击此处获取JSFIDDLE

（仅适用于WEB-KIT浏览器）

我正在创建一个导航，其中的链接会变得更宽，并在你悬停在它们上面时显示文本。除一个问题外，所有问题都能正常工作；当鼠标从按钮上移开并在按钮下按下一瞬间时，文本将不会很快消失（看起来很难看！）。

我正在努力寻找这个问题的解决方案，我已经尝试将跨度的宽度和高度设置为0，并加快转换速度，使文本更快地消失，但两者似乎都不起作用。。

HTML:

<nav>
    <ul id="items">
        <li>><span class="extra"> View</span>
        </li>
        <li>+<span class="extra"> Add</span>
        </li>
    </ul>
    <div id="search">
        <input type="text" ng-model="typed" />
    </div>
</nav>

scs:

nav {
    width: 100%;
    padding: 6px 6px 4px 6px;
    position: fixed;
    top: 0;
    background-color: #dde;
    div {
        display: inline-block;
        float: right;
        padding: 4px 15px 4px 5px;
    }
}
ul#items {
    float: left;
    li {
        display: inline-block;
        padding: 5px 10px;
        background-color: #eef;
        color: #99a;
        width: 10px;
        height: 20px;
        overflow: hidden;
        -webkit-transition: width 0.2s linear, color 0.5s linear, background-color 0.5s linear;
    }
    li:hover {
        background-color: #ccd;
        color: #778;
        width: 45px;
        cursor: pointer;
    }
    li:hover span {
        opacity: 1;
        visibility: visible;
    }
    span {
        opacity: 0;
        font-size: 14px;
        padding-left: 8px 5px;
        -webkit-transition: opacity .25s linear, visibility .1s linear .3s;
        visibility: hidden;
    }
}

Answer 1

如果添加#items li{ white-space: pre; }，li的内容将不会换行，并且标签在+之后在增长时会变得可见，在收缩时会消失而不会出现故障。

请参阅Fiddle